Forms
Dropdown
A select with an optional filter box, for page sizes, models and modes; options carry a label, a mono sublabel and a badge.
Examples
With a filter, and plain
<Dropdown label="Model" options={models} value={model} onChange={setModel} searchable />
<Dropdown options={[{ value: "10", label: "10 rows" }, { value: "25", label: "25 rows" }]} value={size} onChange={setSize} />Guidelines
- Controlled: pass value and onChange. The filter box appears with searchable when there are more than five options.
- Use label for a short uppercase prefix inside the trigger (Model, Mode). align="right" hangs the popover from the trigger's right edge at the end of a row.
- Closes on Escape, on an outside click and on a choice. For two to five options in a row, Segmented is the better control.
Props
| Prop | Type | What it does |
|---|---|---|
| options | { value; label; sublabel?; badge? }[] | The choices. |
| value, onChange | string, (value: string) => void | Controlled selection. |
| label, placeholder, disabled, searchable, align | string, string, boolean, boolean, 'left' | 'right' | Trigger prefix, empty text, state, filter box, popover side. |