Represents whether a function is enabled or disabled (i.e. on or off). Using the toggle should produce immediate results.
# Description
Toggles consist of a switch accompanied by an optional label. They are best used for updating preferences and settings.
# Must include
- Enabled/disabled switch - to indicate whether a function is enabled or disabled.
- Tick icon - additional visual indicator that function is enabled.
# Optional
Label - to indicate what toggle functions are (e.g on/off)
# Toggle or Checkbox, or Radio Button?
When in doubt on which component to use remember the following:
Checkboxes allow the user to select zero or more options. Radio buttons allow the user to select a single option from a group. Toggles allow users turn a single option on or off immediately.
# Rules
- Observe the minimum touch area (56px).
- Provide immediate feedback to the user when they use the toggle.
- When including a label make sure it is clear. When in doubt, say the label and append “on/off’’. If it doesn’t make sense, rewrite it.
- Add an optional state label (‘On' or ‘Off’) to further inform the user of toggle status
# Accessibility
- Toggles (referred to as "switch" by W3) must have a minimum clickable area of 56px to ensure they are not too small for users with motor difficulties to interact with.
- To aid users with visual or cognitive disabilities to understand the state of the toggle, a text label equivalent should be included (such as "on" or "off").
- Where the state of the toggle is "on", include a tick icon as an additional visual indicator.
- Make sure that "on" and "off" states are discernible by using contrasting colours for users with visual impairments that may have high-contrast settings enabled.
- There should be ARIA labels for each state of the toggle to indicate to screen reader users whether it is "on" or "off".