SearchSelect

Open in Playground

Select with a search box that filters the options as you type. Pass filter to customise matching, or onSearch plus filter={() => true} to load options from a server.

Minion

Props

labelstring
Label text.
valuestring
Selected value.
onChange(value: string) => void
Called with the new value.
options{ value, label, disabled? }[]
Options to choose from.
placeholderstring
Default: 'Search…'
Input placeholder.
emptyTextstring
Default: 'No matches'
Text shown when nothing matches.
filter(query, option) => boolean
Custom matching; default is a case-insensitive "contains" on the label.
onSearch(query: string) => void
Called as the user types (and with "" when the list closes).
errorstring
Error message shown below the control; sets the invalid style.
disabledboolean
Default: false
Disable the control.
namestring
Adds a hidden input so the value is submitted with a form.
classNamestring
Default: ''
Extra classes for the root element.
...rest
Any other props are passed to the underlying element.

SearchSelect props
Prop	Type	Default	Description
`label`	string	–	Label text.
`value`	string	–	Selected value.
`onChange`	(value: string) => void	–	Called with the new value.
`options`	{ value, label, disabled? }[]	–	Options to choose from.
`placeholder`	string	`'Search…'`	Input placeholder.
`emptyText`	string	`'No matches'`	Text shown when nothing matches.
`filter`	(query, option) => boolean	–	Custom matching; default is a case-insensitive "contains" on the label.
`onSearch`	(query: string) => void	–	Called as the user types (and with "" when the list closes).
`error`	string	–	Error message shown below the control; sets the invalid style.
`disabled`	boolean	`false`	Disable the control.
`name`	string	–	Adds a hidden input so the value is submitted with a form.
`className`	string	`''`	Extra classes for the root element.
`...rest`		–	Any other props are passed to the underlying element.

Related hooks and theme:useDismissable