Skip to main content

Select

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Variants

Use variant={'filled' | 'standard'} prop with FormControl component for different variants of select and use MenuItem component as children of Select component.



Native Select

Use native prop with Select component and <option> element inside Select component for native select.



Select Props

Use displayEmpty, disabled, error, renderValue, autoWidth, required & inputProps props and FormHelperText component for different types of selects.

With label + helper text

Without label

Auto width

Disabled

Error

Read only

Required



Multiple Select

Use multiple prop for multiple selections.

Default

Checkmarks

Chip

Placeholder

Native



Controlled and Uncontrolled

Manage value prop with the help of a state for controlled Select and use defaultValue prop for uncontrolled Select.



Sizes

Use size='small' | 'medium' prop with Select component to use different sizes of select.



Customized Select

Use styled hook to customize your select.



Grouping

Display categories with the ListSubheader component or the native <optgroup> element.



Select with Dialog