Components / UI components / Forms
Searchable choicesExperimental alpha
MultiSelect
Search and select several values without losing choices outside the current results.
MultiSelect 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.
Store selected IDs independently of the current search results. Each choice can be removed from its labelled chip. Store selected IDs in your app. Validate them against current access and available choices before submission.
labelstring- Visible field label.
optionsreadonly MultiSelectOption[]- Stable IDs, labels, descriptions and optional disabled reasons.
valuereadonly string[]- Selected IDs, including values outside the current result window.
onValueChange(value: readonly string[]) => void- Requests the complete updated selection.
querystring- Search text, separate from the selected values.
onQueryChange(query: string) => void- Update the controlled query.
filterOptionfalse | ((option, query) => boolean) (optional)- Disable local filtering for server results or supply your own match function.
These are the main props for the example. The package's TypeScript declarations include the full API.