Unstyled 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';Parameters
| Name | Type | Description |
|---|---|---|
| disabled* | boolean | |
| label* | string | React.ReactNode | |
| value* | Value | |
| id | string | |
| optionRef | React.Ref<HTMLElement> |
Return value
| Name | Type | Description |
|---|---|---|
| getRootProps | <Other extends EventHandlers>(otherHandlers?: Other) => UseOptionRootSlotProps<Other> | |
| highlighted | boolean | |
| index | number | |
| ref | React.RefCallback<HTMLElement> | |
| selected | boolean |
useSelect API
Import
import useSelect from '@mui/base/useSelect';
// or
import { useSelect } from '@mui/base';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. |
| 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 | (e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, value: SelectValue<OptionValue, Multiple>) => void | Callback fired when an option is selected. | |
| onHighlightChange | (e: 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. | |
| optionStringifier | (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. |
| 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. |
| 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. |
| 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). |