Toggle
Overview
The Toggle is a compact control used to manage two mutually exclusive states (e.g. "And/Or" "On/Off" "Yes/No"). It provides both graphic and textual indicators that make the state of the control unambiguous.
Usage
- It is best applied when space is at a premium and or the states can be described in single-syllable words e.g. "And/Or" "On/Off" "Yes/No".
- It acts immediately like a toggle and does not require a secondary selection to apply the choice made (no select-and-act sequence).
- It can be used to show and hide other controls, (e.g. Group Box, Radio Button Group), provided there is no need to indicate a mixed state.
Alternatives
- Radio Buttons - Use when there are more than two options. Use when the options require labels longer than a single syllable word. Use when the user will want to compare all the options in a single glance. Use when space is not at a premium.
- Checkboxes - Use when the control will be repeated (e.g. in a data table column it is better to use a checkbox than a toggle). Use when a mixed state indication is required, e.g. when the checkbox will represent two or more controls (e.g. other checkboxes).
- Combo Boxes - Use if there are multiple choices, long labels are required and space is at a premium.
Options
- Size - Three sizes are provided, sm, med, long
- Error State- can be indicated if the control or another control it is hiding is in an error condition
References
Updated over 2 years ago