Toggle Button Group
The Toggle Button Group component allows the user to select one option from a set. It is used independently or as a form component within a Form Block.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| label | node | Specifies a label for the component. | |
| value | any | Specifies a value for the component. | |
| classes | object | Overrides or extends the classes applied to the component. | |
| exclusive | bool | false | If true, only allow one of the toggle buttons to be selected. |
| disabled | bool | false | If true, the toggle button group is disabled. |
| toggleButtonItems | component | Specifies a list of toggle buttons within the toggle button group. |
Style Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| orientation | horizontal vertical string | horizontal | Specifies the orientation of the toggle button group. |
| size | small medium large string | medium | Defines the size of the component. |
| color | standard primary secondary error info success warning string | standard | Defines the color of the component. |
| fullWidth | bool | false | If true, the toggle button group takes up the full width of its container. |
| sx | array | Specifies custom CSS styles for the toggle button group. |
Subcomponents
The Toggle Button Group component has one subcomponent, a Toggle Button component, used to create a list of Toggle Button Items.
Toggle Button
A Toggle Button is a component that acts as a single input control and is part of a set within a Toggle Button Group. It is possible to select multiple toggle buttons unless the exclusive property is enabled for the Toggle Button Group.
The toggle button has two states, On and Off.
For further details, see the Toggle Button component.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | The text label of the component (read only in the toggle button group props) . |
For more detail on the Toggle Button Group component, see the MUI developer docs.