Select

The Select components let you create lists of options for users to choose from.

useOption API

Import

import useOption from '@mui/base/useOption';
// or
import { useOption } from '@mui/base';

You can learn about the difference by reading this guide on minimizing bundle size.

Parameters

Name	Type	Description
disabled^*	boolean
label^*	string \| React.ReactNode
value^*	Value
id	string
rootRef	React.Ref<Element>

Return value

Name	Type	Description
getRootProps	<Other extends EventHandlers>(otherHandlers?: Other) => UseOptionRootSlotProps<Other>
highlighted	boolean
index	number
rootRef	React.RefCallback<Element> \| null
selected	boolean

useSelect API

Import

import useSelect from '@mui/base/useSelect';
// or
import { useSelect } from '@mui/base';

You can learn about the difference by reading this guide on minimizing bundle size.

Parameters

Name	Type	Default	Description
buttonRef	React.Ref<Element>		The ref of the trigger button element.
defaultOpen	boolean	false	If `true`, the select will be open by default.
defaultValue	SelectValue<OptionValue, Multiple>		The default selected value. Use when the component is not controlled.
disabled	boolean	false	If `true`, the select is disabled.
getOptionAsString	(option: SelectOption<OptionValue>) => string	defaultOptionStringifier	A function used to convert the option label to a string. This is useful when labels are elements and need to be converted to plain text to enable keyboard navigation with character keys.
listboxId	string		The `id` attribute of the listbox element.
listboxRef	React.Ref<Element>		The ref of the listbox element.
multiple	Multiple	false	If `true`, the end user can select multiple values. This affects the type of the `value`, `defaultValue`, and `onChange` props.
onChange	(event: React.MouseEvent \| React.KeyboardEvent \| React.FocusEvent \| null, value: SelectValue<OptionValue, Multiple>) => void		Callback fired when an option is selected.
onHighlightChange	(event: React.MouseEvent<Element, MouseEvent> \| React.KeyboardEvent<Element> \| React.FocusEvent<Element, Element> \| null, highlighted: OptionValue \| null) => void		Callback fired when an option is highlighted.
onOpenChange	(open: boolean) => void		Callback fired when the listbox is opened or closed.
open	boolean		Controls the open state of the select's listbox. This is the controlled equivalent of the `defaultOpen` prop.
options	SelectOptionDefinition<OptionValue>[]		An alternative way to specify the options. If this parameter is set, options defined as JSX children are ignored.
value	SelectValue<OptionValue, Multiple>		The selected value. Set to `null` to deselect all options.

Return value

Name	Type	Description
buttonActive	boolean	If `true`, the trigger button is active (pressed).
buttonFocusVisible	boolean	If `true`, the trigger button has a visible focus.
buttonRef	React.RefCallback<Element> \| null	Ref to the button slot DOM node.
contextValue	SelectProviderValue<Value>	A value to be passed to the `SelectProvider` component.
disabled	boolean	If `true`, the select is disabled.
dispatch	(action: ListAction<Value> \| SelectAction) => void	Action dispatcher for the select component. Allows to programmatically control the select.
getButtonProps	<OtherHandlers extends EventHandlers = {}>(otherHandlers?: OtherHandlers) => UseSelectButtonSlotProps<OtherHandlers>	Resolver for the button slot's props.
getListboxProps	<OtherHandlers extends EventHandlers = {}>(otherHandlers?: OtherHandlers) => UseSelectListboxSlotProps<OtherHandlers>	Resolver for the listbox slot's props.
getOptionMetadata	(optionValue: Value) => SelectOption<Value> \| undefined	A function that returns the metadata of an option with a given value.
highlightedOption	Value \| null	The value of the highlighted option.
listboxRef	React.RefCallback<Element> \| null	Ref to the listbox slot DOM node.
open	boolean	If `true`, the listbox is open.
options	Value[]	Values of all the registered options.
value	SelectValue<Value, Multiple>	The value of the selected option(s).