MultiSelectUnstyled API
API documentation for the React MultiSelectUnstyled component. Learn about the available props and the CSS API.
Import
import MultiSelectUnstyled from '@mui/base/MultiSelectUnstyled';
// or
import { MultiSelectUnstyled } from '@mui/base';The foundation for building custom-styled multi-selection select components.
Props
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| autoFocus | bool | false | If true, the select element is focused during the first mount |
| component | elementType | The component used for the root node. Either a string to use a HTML element or a component. | |
| defaultListboxOpen | bool | false | If true, the select will be initially open. |
| defaultValue | array | [] | The default selected values. Use when the component is not controlled. |
| disabled | bool | false | If true, the select is disabled. |
| getSerializedValue | func | A function to convert the currently selected values to a type accepted by HTML input. Used to set a value of a hidden input associated with the select, so that the selected values can be posted with a form. | |
| listboxId | string | id attribute of the listbox element. Also used to derive the id attributes of options. | |
| listboxOpen | bool | undefined | Controls the open state of the select's listbox. |
| name | string | Name of the element. For example used by the server to identify the fields in form submits. If the name is provided, the component will render a hidden input element that can be submitted to a server. | |
| onChange | func | Callback fired when an option is selected. | |
| onListboxOpenChange | func | Callback fired when the component requests to be opened. Use in controlled mode (see listboxOpen). | |
| optionStringifier | func | defaultOptionStringifier | A function used to convert the option label to a string. It's useful when labels are elements and need to be converted to plain text to enable navigation using character keys on a keyboard. |
| renderValue | func | Function that customizes the rendering of the selected values. | |
| slotProps | { listbox?: func | object, popper?: func | object, root?: func | object } | {} | The props used for each slot inside the MultiSelect. |
| slots | { listbox?: elementType, popper?: elementType, root?: elementType } | {} | The components used for each slot inside the MultiSelect. Either a string to use a HTML element or a component. |
| value | array | The selected values. Set to an empty array to deselect all options. |
The
ref is forwarded to the root element.