Components / UI components / Forms
Searchable choicesExperimental alpha
Combobox
Search a list and choose one value, with labelled loading and error states.
Combobox preview
Loading example…
Interactions use local sample data.
Usage and props
Import this component from @stackunseen/ui/application. Load @stackunseen/ui/styles.css first, then @stackunseen/ui/application.css.
Keep the search query separate from the chosen ID. The input filters the supplied options; set filterOption to false when your server already filtered them. Keep the selected value and search query in your app. Use filterOption={false} for options already filtered by your server.
labelstring- Visible field label and option-list name.
optionsreadonly ComboboxOption[]- Stable value, label, optional description and disabled reason. At most 200 matches are shown with a refinement hint.
valuestring | null- Selected ID. A value outside the loaded options remains explicit.
onValueChange(value: string | null) => void- Accept a requested selection or clear in your application.
querystring- Current search text.
onQueryChange(query: string) => void- Update search text and, if needed, request new host results.
status'ready' | 'loading' | 'error' (optional)- Actual option availability. Supply error for a useful failure message.
These are the main props for the example. The package's TypeScript declarations include the full API.