Toggle#
On/Off Toggle#
HTML#
Use toggle and toggle-bead classes to style a button and its only child into a toggle.
Properties
Checked
Disabled
React#
We recommend using <Switch /> from Headless UI library.
Additional description to the action. Potentially with a link to some other pages.
Properties
Checked
Disabled
Multi-label toggle#
Multi-label Toggle is an alternative to radio buttons where the options can be labelled with a single word, and when the select UI needs to be in the same layout with many other On/Off toggles.
Choose the multi-label toggles over on/off toggles, when the purpose of the switch cannot be directly mapped to binaries such as "on/off", "enabled/disabled", and "active/inactive".
We recommend using <RadioGroup> from Headless UI library.
Properties
Value
Disabled
Comparing to other multi-select patterns#
Button Group#
Toggles are more often used in forms, while button group is a pattern that can be used in many other places.
Radio Buttons#
Radio Buttons can present options with richer, more complex meanings. Toggles can only present binary options. Multi-label toggles, while having customisable labels, can only present one word.
Radio Buttons usually take more space and more complex to layout. Toggles have one single strictly-defined height (36px).
Dropdown#
Dropdowns only present options to the user when they interact with them. Toggles present the options without interaction.