Select

Open in Playground

Themed select with a listbox panel that is never clipped by its container. options: [{ value, label, disabled? }], optional placeholder and error. Keyboard: Up / Down / Home / End move, Enter or Space picks, Escape closes, and typing jumps to a match. variant="flat" gives a borderless trigger for toolbars and for use over images or video.

helperText shows a hint under the field while there is no error, and links it to the control with aria-describedby.

Banana

Props

helperTextReactNode
Hint under the field while there is no error; linked with aria-describedby.
labelstring
Label text.
valuestring
Selected value.
onChange(value: string) => void
Called with the new value.
options{ value, label, disabled? }[]
Options to choose from.
placeholderstring
Text shown when nothing is selected.
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.
variant'default' | 'flat'
Default: 'default'
A bordered field, or a borderless flat trigger for toolbars and over media.
classNamestring
Default: ''
Extra classes for the root element.
...rest
Any other props are passed to the underlying element.

Select props
Prop	Type	Default	Description
`helperText`	ReactNode	–	Hint under the field while there is no `error`; linked with `aria-describedby`.
`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	–	Text shown when nothing is selected.
`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.
`variant`	'default' \| 'flat'	`'default'`	A bordered field, or a borderless flat trigger for toolbars and over media.
`className`	string	`''`	Extra classes for the root element.
`...rest`		–	Any other props are passed to the underlying element.

Related hooks and theme:useDismissable