Dropdown
A custom select with an optional search box. For a list long enough that scanning it is the problem — a country list, a store list. Everything shorter should be a Select.
import Dropdown from '@/components/ui/Dropdown';Source: src/components/ui/Dropdown.tsx
Examples
Plain and searchable
size="sm"
Props
<Dropdown> props
| Prop | Type | Default | Description |
|---|---|---|---|
optionsrequired | DropdownOption[] | — | — |
value | string | — | — |
onChange | (value: string) => void | — | — |
placeholder | string | 'Select Options' | — |
searchable | boolean | false | Renders the style guide's "searchable" variant: an input that filters the menu while typing. |
disabled | boolean | false | — |
size | 'sm' | 'md' | 'md' | — |
className | string | '' | — |
id | string | — | Applied to the field element (the input when searchable, the button otherwise) so `Field` can wire its label to it — Field clones its child with an `id` and `aria-describedby`, which a component that doesn't accept them silently drops, leaving a label that points at nothing. |
Usage
Do
- Turn on `searchable` once the list passes about ten options.
Don’t
- Don’t use it for a short list. A native Select is better on every phone.
- Don’t use it for actions — that is a Menu.