Skip to content
+

Select

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

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.

NameTypeDefaultDescription
value*any-

The value of the option.

disabledboolfalse

If true, the option will be disabled.

labelstring-

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 nameClass nameDefault componentDescription
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 nameDescription
.base--disabledState class applied to the root li element if disabled={true}.
.base--selectedState class applied to the root li element if selected={true}.
.base-Option-highlightedState 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.

NameTypeDefaultDescription
disabledboolfalse

If true all the options in the group will be disabled.

labelnode-

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 nameClass nameDefault componentDescription
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 nameDescription
.base--disabledState 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.

NameTypeDefaultDescription
areOptionsEqualfunc-

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.

autoCompletestring-

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.

autoFocusboolfalse

If true, the select element is focused during the first mount

defaultListboxOpenboolfalse

If true, the select will be initially open.

defaultValueany-

The default selected value. Use when the component is not controlled.

disabledboolfalse

If true, the select is disabled.

getOptionAsStringfuncdefaultOptionStringifier

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.

getSerializedValuefunc-

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.

listboxIdstring-

id attribute of the listbox element.

listboxOpenboolundefined

Controls the open state of the select's listbox.

multipleboolfalse

If true, selecting multiple values is allowed. This affects the type of the value, defaultValue, and onChange props.

namestring-

Name of the element. For example used by the server to identify the fields in form submits.

onChangefunc-

Callback fired when an option is selected.

onListboxOpenChangefunc-

Callback fired when the component requests to be opened. Use in controlled mode (see listboxOpen).

placeholdernode-

Text to show when there is no selected value.

renderValuefunc-

Function that customizes the rendering of the selected value.

requiredboolfalse

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.

valueany-

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 nameClass nameDefault componentDescription
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 nameDescription
.base--activeState class applied to the root button element if active={true}.
.base--disabledState class applied to the root button element and the listbox 'ul' element if disabled={true}.
.base--expandedState class applied to the root button element if expanded={true}.
.base--focusVisibleState class applied to the root button element if focusVisible={true}.