Unstyled Select

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

OptionGroupUnstyled API

Import

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

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

Props

Props of the native component are also available.

Name	Type	Default	Description
component	elementType		The component used for the root node. Either a string to use a HTML element or a component.
disabled	bool	false	If `true` all the options in the group will be disabled.
label	node		The human-readable description of the group.
slotProps	{ label?: func \| object, list?: func \| object, root?: func \| object }	{}	The props used for each slot inside the Input.
slots	{ label?: elementType, list?: elementType, root?: elementType }	{}	The components used for each slot inside the OptionGroupUnstyled. Either a string to use a HTML element or a component. See Slots API below for more details.

The ref is forwarded to the root element.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

Name	Default class	Default HTML tag	Description
root	.MuiOptionGroup-root	'li'	The component that renders the root.
label	.MuiOptionGroup-label	'span'	The component that renders the label.
list	.MuiOptionGroup-list	'ul'	The component that renders the list.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.

Global class	Description
.Mui-disabled STATE	State class applied to the root `li` element if `disabled={true}`.

OptionUnstyled API

Import

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

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

Props

Props of the native component are also available.

Name	Type	Default	Description
value^*	any		The value of the option.
component	elementType		The component used for the root node. Either a string to use a HTML element or a component.
disabled	bool	false	If `true`, the option will be disabled.
label	string		A text representation of the option's content. Used for keyboard text navigation matching.
slotProps	{ root?: func \| object }	{}	The props used for each slot inside the OptionUnstyled.
slots	{ root?: elementType }	{}	The components used for each slot inside the OptionUnstyled. Either a string to use a HTML element or a component. See Slots API below for more details.

The ref is forwarded to the root element.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

Name	Default class	Default HTML tag	Description
root	.MuiOption-root	'li'	The component that renders the root.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.

Global class	Description
.Mui-disabled STATE	State class applied to the root `li` element if `disabled={true}`.
.Mui-selected STATE	State class applied to the root `li` element if `selected={true}`.
.MuiOption-highlighted	State class applied to the root `li` element if `highlighted={true}`.

SelectUnstyled API

Import

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

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

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	any		The default selected value. 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 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.
listboxId	string		`id` attribute of the listbox element.
listboxOpen	bool	undefined	Controls the open state of the select's listbox.
multiple	bool	false	If `true`, selecting multiple values is allowed. This affects the type of the `value`, `defaultValue`, and `onChange` props.
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 value.
slotProps	{ listbox?: func \| object, popper?: func \| object, root?: func \| object }	{}	The props used for each slot inside the Input.
slots	{ listbox?: elementType, popper?: elementType, root?: elementType }	{}	The components used for each slot inside the Select. Either a string to use a HTML element or a component. See Slots API below for more details.
value	any		The selected value. Set to `null` to deselect all options.

The ref is forwarded to the root element.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

Name	Default class	Default HTML tag	Description
root	.MuiSelect-root	'button'	The component that renders the root.
listbox	.MuiSelect-listbox	'ul'	The component that renders the listbox.
popper	.MuiSelect-popper	PopperUnstyled	The component that renders the popper.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.

Global class	Description
.Mui-active STATE	State class applied to the root `button` element if `active={true}`.
.Mui-disabled STATE	State class applied to the root `button` element and the listbox 'ul' element if `disabled={true}`.
.Mui-expanded STATE	State class applied to the root `button` element if `expanded={true}`.
.Mui-focusVisible STATE	State class applied to the root `button` element if `focusVisible={true}`.