Toggle Buttons
Toggle buttons can be used to group related options.
To emphasize groups of related Toggle buttons,
a group should share a common container.
The ToggleButtonGroup
controls the selected state of its child buttons when given its own value
prop.
Exclusive selection
With exclusive selection, selecting one option deselects any other.
In this example, text justification toggle buttons present options for left, center, right, and fully justified text (disabled), with only one item available for selection at a time.
Multiple selection
Multiple selection allows for logically-grouped options, like bold, italic, and underline, to have multiple options selected.
<ToggleButtonGroup size="small" {...control}>
{children}
</ToggleButtonGroup>
<ToggleButtonGroup {...control}>{children}</ToggleButtonGroup>
<ToggleButtonGroup size="large" {...control}>
{children}
</ToggleButtonGroup>
<ToggleButtonGroup
color="primary"
value={alignment}
exclusive
onChange={handleChange}
>
<ToggleButton value="web">Web</ToggleButton>
<ToggleButton value="android">Android</ToggleButton>
<ToggleButton value="ios">iOS</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup
orientation="vertical"
value={view}
exclusive
onChange={handleChange}
>
<ToggleButton value="list" aria-label="list">
<ViewListIcon />
</ToggleButton>
<ToggleButton value="module" aria-label="module">
<ViewModuleIcon />
</ToggleButton>
<ToggleButton value="quilt" aria-label="quilt">
<ViewQuiltIcon />
</ToggleButton>
</ToggleButtonGroup>
Enforce value set
If you want to enforce that at least one button must be active, you can adapt your handleChange function.
const handleAlignment = (event, newAlignment) => {
if (newAlignment !== null) {
setAlignment(newAlignment);
}
};
const handleDevices = (event, newDevices) => {
if (newDevices.length) {
setDevices(newDevices);
}
};
<ToggleButton
value="check"
selected={selected}
onChange={() => {
setSelected(!selected);
}}
>
<CheckIcon />
</ToggleButton>
Customization
Here is an example of customizing the component. You can learn more about this in the overrides documentation page.
Accessibility
ARIA
- ToggleButtonGroup has
role="group"
. You should provide an accessible label witharia-label="label"
,aria-labelledby="id"
or<label>
. - ToggleButton sets
aria-pressed="<bool>"
according to the button state. You should label each button witharia-label
.
Keyboard
At present, toggle buttons are in DOM order. Navigate between them with the tab key. The button behavior follows standard keyboard semantics.