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';Resolver for the root slot's props.
Type:<ExternalProps extends Record<string, unknown>>(externalProps?: ExternalProps) => UseOptionRootSlotProps<ExternalProps>
useOptionContextStabilizer API
Import
import { useOptionContextStabilizer } from '@mui/base/useOption';
// or
import { useOptionContextStabilizer } from '@mui/base';useSelect API
Import
import { useSelect } from '@mui/base/useSelect';
// or
import { useSelect } from '@mui/base';A function used to determine if two options' values are equal. By default, reference equality is used.
There is a performance impact when using the areOptionsEqual prop (proportional to the number of options). Therefore, it's recommented to use the default reference equality comparison whenever possible.
Type:(a: OptionValue, b: OptionValue) => boolean
The name of the component using useSelect. For debugging purposes.
Type:string
Default:'useSelect'
The default selected value. Use when the component is not controlled.
Type:SelectValue<OptionValue, Multiple>
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.
Type:(option: SelectOption<OptionValue>) => string
Default:defaultOptionStringifier
A function to convert the currently selected value to a string. Used to set a value of a hidden input associated with the select, so that the selected value can be posted with a form.
Type:(option: SelectValue<SelectOption<OptionValue>, Multiple>) => React.InputHTMLAttributes<HTMLInputElement>['value']
If true, the end user can select multiple values. This affects the type of the value, defaultValue, and onChange props.
Type:Multiple
Default:false
The name attribute of the hidden input element. This is useful when the select is embedded in a form and you want to access the selected value in the form data.
Type:string
Callback fired when an option is selected.
Type:(event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, value: SelectValue<OptionValue, Multiple>) => void
Callback fired when an option is highlighted.
Type:(event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element> | React.FocusEvent<Element, Element> | null, highlighted: OptionValue | null) => void
Controls the open state of the select's listbox. This is the controlled equivalent of the defaultOpen prop.
Type:boolean
An alternative way to specify the options. If this parameter is set, options defined as JSX children are ignored.
Type:SelectOptionDefinition<OptionValue>[]
If true, the select embedded in a form must have a selected value. Otherwise, the form submission will fail.
Type:boolean
Action dispatcher for the select component. Allows to programmatically control the select.
Type:(action: ListAction<Value> | SelectAction<Value>) => void
Resolver for the button slot's props.
Type:<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSelectButtonSlotProps<ExternalProps>
Resolver for the hidden input slot's props.
Type:<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSelectHiddenInputSlotProps<ExternalProps>
Resolver for the listbox slot's props.
Type:<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSelectListboxSlotProps<ExternalProps>
A function that returns the metadata of an option with a given value.
Type:(optionValue: Value) => SelectOption<Value> | undefined