Dropdown#

HTML with CSS class#

React Component#

Properties

Label

Value

Left Icon

Invalid

Disabled

Required

Class Name

Props

nametypedefaultdescription

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>
      )
    }
  />
);