Select

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

Component demos Components API Hooks API

Option API

Import

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

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.
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 Option.
slots	{ root?: elementType }	{}	The components used for each slot inside the Option. 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.

Slot name	Class name	Default component	Description
root	.base-Option-root	`'li'`	The component that renders the root.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Description
.base--disabled	State class applied to the root `li` element if `disabled={true}`.
.base--selected	State class applied to the root `li` element if `selected={true}`.
.base-Option-highlighted	State class applied to the root `li` element if `highlighted={true}`.

OptionGroup API

Import

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

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
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 OptionGroup. 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.

Slot name	Class name	Default component	Description
root	.base-OptionGroup-root	`'li'`	The component that renders the root.
label	.base-OptionGroup-label	`'span'`	The component that renders the label.
list	.base-OptionGroup-list	`'ul'`	The component that renders the list.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Description
.base--disabled	State class applied to the root `li` element if `disabled={true}`.

Select API

Import

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

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
areOptionsEqual	func		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.
autoComplete	string		This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it following the specification.
autoFocus	bool	false	If `true`, the select element is focused during the first mount
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.
getOptionAsString	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.
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.
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).
placeholder	node		Text to show when there is no selected value.
renderValue	func		Function that customizes the rendering of the selected value.
required	bool	false	If `true`, the Select cannot be empty when submitting form.
slotProps	{ listbox?: func \| object, popup?: func \| object, root?: func \| object }	{}	The props used for each slot inside the Input.
slots	{ listbox?: elementType, popup?: 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.

Slot name	Class name	Default component	Description
root	.base-Select-root	`'button'`	The component that renders the root.
listbox	.base-Select-listbox	`'ul'`	The component that renders the listbox.
popup	.base-Select-popup	`'div'`	The component that wraps the popup.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

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