Forms
Combobox
A searchable select with autocomplete. It is a controlled component, so hold the chosen value in state.
Purpose
Reach for a combobox once a Select list is long enough that scanning it is slower than typing. For several choices at once use Multi-select.
Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
optionsrequired | ComboboxOption[] | — | Selectable options. `label` is displayed and searched; `value` is reported to `onValueChange`. |
value | string | undefined | — | The currently selected option's `value` (controlled). |
onValueChange | ((value: string) => void) | undefined | — | Called with the newly selected `value`, or an empty string when the current selection is toggled off. |
placeholder | string | undefined | "Select…" | Text shown on the trigger when nothing is selected. |
searchPlaceholder | string | undefined | "Search…" | Placeholder for the search input inside the dropdown. |
emptyText | string | undefined | "No results found." | Message shown when the search matches no options. |
className | string | undefined | — | Extra classes applied to the trigger button. |
id | string | undefined | — | `id` forwarded to the trigger button, for pairing with a `<Label htmlFor>`. |
label | string | undefined | the `placeholder` text | Accessible name for the trigger. The trigger carries `role="combobox"`, whose accessible name does *not* come from its own text — that text is read as the current value. Without a name, a screen reader announces the selected option with no indication of what it selects. Omit only when you have paired a visible `<Label htmlFor>` with `id`. |
Quantity toggleDraft
A numeric stepper for small counted quantities such as claim line items or dependant counts. Arrow keys step, and values clamp to min and max.
Multi-selectPlanned
Pick several options from a known list, with the chosen values shown as removable chips and an overflow count once they no longer fit.