Skip to main content

Select

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

Custom

To use the custom select, use select prop with the CustomTextField component and pass multiple MenuItem components as children of the CustomTextField component for the multiple options.


To use the custom select, use the slotProps={{ select: { native: true } }} prop with the CustomTextField component and pass multiple <option> elements as children of the CustomTextField component for the multiple options.


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 label, helperText, disabled, error, required and slotProps props with the CustomTextField component for different states of select.

With label + helper text

Auto width

Disabled

Error

Read only

Required

Without label


Controlled and Uncontrolled

Manage value with the help of a state and pass it in the select prop in slotProps with the CustomTextField component for controlled select and use defaultValue prop with the CustomTextField component for uncontrolled Select.


Sizes

Use size='small' | 'medium' prop with CustomTextField component for different sizes of select.


Multiple Select

Use slotProps={{ select: { multiple: true } }} prop with the CustomTextField component for multiple selections.


Select with Dialog

Grouping

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