Toggle switch component purpose
Toggle switch is used to immediately toggle a setting on or off.
toggle-switch
8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Toggle switch anatomy parts
A toggle switch consists of three parts: the Track (the clickable area where the toggle switch moves back and forth), the Knob (changes color and position depending on whether the switch is on or off), and the Status (a text label showing whether the switch is on or off).
Toggle switch label guidelines
Every toggle switch should have a label that says what is being turned on or off. Optionally, you may include a description about the setting. Labels should be succinct and can describe an object or an action (for example: 'Discussions' or 'Automatically watch repositories'). Do not use phrases that describe the switch's state in your label.
Toggle switch size variants
A small variant is provided to maintain visual hierarchy, or for dense areas where the default size will not fit.
Toggle switch loading state
When a toggle switch is waiting for something to load before toggling, a loading indicator should be displayed. The switch should not prematurely toggle from 'on' to 'off'. Wait until loading is complete before showing a change.
Toggle switch and progressive disclosure pattern
The progressive disclosure pattern may be used to hide or show content based on whether a toggle switch is on. Content revealed on toggle switch activation should always come after the toggle switch.
Mixed values with toggle switches
Since a toggle switch can only be 'on' or 'off', it could be confusing to use a switch to represent mixed values. If you have a group of configuration options that can be disabled, use a button instead of a toggle switch. Disabling the group turns off all configuration options but remembers their previous state when the user wants to turn that section back on. While the section is disabled, the configuration options are hidden.
Toggle switch vs checkbox distinction
Toggle switches are buttons that change and save a boolean configuration option when they are toggled. Checkboxes are form inputs that are used to select one or more items from a list, and are not saved without explicit confirmation such as pressing a Save button. A toggle switch should never be used as a replacement for a checkbox.