Switch

Use case

Users should be able to:

• Navigate to a switch using assistive technology.
• Toggle the switch on and off.
• Receive feedback on the state of the switch.

Interactions

• Toggling a switch causes content to change or settings to be applied immediately.
• Switches do not require ‘save’ or ‘submit’ buttons for changes to happen.
• Switches should only be used when choosing between two opposing states, usually on/off states.

Keyboard interactions

• Tab. Moves focus from the previous interactive element on the page to the switch. 
• Enter or Space. Toggles the switch between on and off.

Design considerations

• A  switch should always have a clear, visible label describing its purpose.
• Use clear visual indicators for on and off states, including color, text, and position of icons.
• Avoid using only visual indicators to convey on and off states. Provide text to help convey meaning.
• Make sure that switches are large enough for touch and mouse interaction.

Development considerations

• The switch label should be provided using a label attribute, with a for attribute pointing to the id of the switch element.
• There is no native switch element in HTML, so switches need to use role=switch to accurately convey information to screen reader users.
• The switch should be a checkbox, with a role=”switch”so the checked and unchecked behaviour is inherited and announced to screen reader users.
• Some browsers may not support ARIA roles, so do not use generic elements such as div to create switches.