Dropdown#
HTML with CSS class#
Properties
React Component#
Properties
Label
Value
Left Icon
Invalid
Disabled
Required
Class Name
Props
name | type | default | description |
---|
Dynamic Left Icon#
const options = [
{ label: "Netherlands", value: "NL" },
{ label: "Belgium", value: "BE" },
];
const [value, setValue] = useState("NL");
const imgSrc = {
NL: "/images/country-nl.svg",
BE: "/images/country-be.svg",
}[value];
return (
<Dropdown
label="select a country"
options={options}
value={value}
onChange={(evt) => setValue(evt.target.value)}
leftIcon={
imgSrc && (
<div className="pl-0.5 pt-0.5 pb-1">
<img className="w-full h-full" src={imgSrc} />
</div>
)
}
/>
);