Select

A widget that presents a list of options and allows a user to select one of them.

To maximize accessibility, Select extends the browser's native <select> element.

Size

Variant

The last variant solid is a special variant that only implements a subset of the intents (and vice versa: the relevant intents may not implement styles for every variant).

Intent

Disabled

Right icon

To override the default ChevronDown icon (from lucide-react), pass a custom icon component to the rightIcon prop.

1
<DesignComponentsDisplay>
2
  <Select rightIcon={<Circle />}>
3
    <option>Select</option>
4
  </Select>
5
</DesignComponentsDisplay>

Radio Switch