Toggles
Toggles allow users to turn a feature or function on and off.
Types
Switch
Disabled & Enabled
Button
Colors are not the standard or the default and can be changed based on content.
Icon
Colors and icons are not the standard or the default and can be changed based on content.
On/Off
Colors and icons are not the standard or the default and can be changed based on content.
Guidelines
If a physical switch would work for the action, a toggle is probably the best component to use.
Anatomy
- Thumb - The color and position change according to whether the switch is on or off
- Track - The area where the toggle switch moves back and forth when clicked
Interaction
Users can turn on and off individual options by tapping or clicking the toggle.
Best Practices
- Toggle switches have two states: on and off.
- Depending on layout limitations, labels can be placed to the left or right of a toggle.
- Never put the label on both sides. (ex. on/off)
- Toggle should all start with a verb and be simple and straightforward.
Do
- When there is a lack of space.
- Use a tooltip to explain what occurs when the toggle is flipped.
Don't
- If a setting or option has more than one choice, such as filter settings,