OptionGroupUnstyled API
Demos
For examples and details on the usage of this React component, visit the component demo pages:
Import
import OptionGroupUnstyled from '@mui/base/OptionGroupUnstyled';
// or
import { OptionGroupUnstyled } from '@mui/base';An unstyled option group to be used within a SelectUnstyled.
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 
styleOverridesproperty in a custom theme.