Toggle Group
Toggle buttons can be used to put together related options that share a common attribute modification. It allows the user to switch from one selected option to another in the same control, having one option selected at a time. Also, there can be another variation that allows selecting multiple options from the current toggle group.
Toggles should be used in place of radio buttons whenever the options are:
- Minimal in number, i.e. 3 or 4 maximum choices where only one selection is required.
- Opposites of each other.
The selection of the toggle group can be mutually exclusive (single variant) or mutually inclusive (multiple variant).
Icons can be used to add information and clarify the action performed by each button in the toggle group. Do not use icons primarily for visual interest.
- The size of the icons is 24 by 24 pixels. They must be aligned vertically and horizontally with respect to the corresponding toggle button box.
- A group of icon-only toggle buttons is a valid use case and allowed in the design system. In such a situation and in order to preserve the accessibility of the component, the use of the title prop is mandatory.
- The
titleprop offers a contextual bubble with missing information necessary to clarify the action performed by each toggle button. It also provides an accessible gateway when no regular label can be specified. - Try to limit the use of icon-only toggle groups. Whenever possible, the icon should be accompanied by a label.