Switch
A switch allows users to toggle between enabled and disabled states.
Published: Last updated:
Overview
A switch is a control designed to toggle between two states quickly. It is used exclusively for binary actions that take effect immediately after the user interacts with it. Switches are commonly used to toggle ‘on/off’ states.
When to use
- Used to switch a single option that impacts system or page settings.
- Best suited for settings or preferences that take effect instantly.
- Recommended for actions where the change is reversible without requiring further confirmation.
When not to use
- Avoid using switches for actions that require immediate feedback or confirmation, such as file deletion.
- Do not use switches for more than two options; instead, opt for a dropdown, response button, or checkbox.
- Refrain from using switches for non-binary settings or those that don’t apply instantly; consider using other UI components, like a checkbox with a button.
|
Variant
|
Purpose
|
|---|---|
| Default switch | Use the default switch when you need to include a label text alongside the toggle state text. Default toggles are typically found in forms or on pages with more comprehensive information. |
| Small switch | Use the small switch when label or state text is not required. Small toggles are more compact and are typically used inline with other components. |
Anatomy
Both default and small switches consist of a label, a switch, a status tag and optional helper text. Default switches must include a label and a status tag, whereas the small switch allows these elements to be optional. In the ‘on’ state, the small switch displays a checkmark tick to maintain accessibility when label and state text are not provided.
Label text
The label text should accompany the switch to provide context and clarify its state. However, label text is optional for the small switch.
Status tag
Use status tag to clearly describe the binary action of the switch. It should be no more than three words and appears beside the switch. Status tags are optional for the small switch.
Language
Use adjectives rather than verbs to describe actions and the state of the object affected.
Helper text
Optional helper text provides relevant information and offers additional guidance or context to the user. Use sentence-style capitalisation, and in most cases, write the text as full sentences with punctuation.
States
The default and small switch have two primary states: on and off. Additional interactive states include focus and disabled. For more details on switch states, refer to the Style tab.
|
State
|
When to use
|
|---|---|
| On | When a user clicks or uses keys to switch the component on. |
| Off | When a user clicks or uses keys to switch the component off. |
| Focus | When a user presses Tab or clicks on the switch, it becomes focused – indicating successful navigation to the component. |
| Disabled | When a user cannot interact with the switch due to permissions, dependencies, or prerequisites, it enters a disabled state. This state removes all interactive functionality, and its styling is not required to meet WCAG contrast guidelines. |
Mouse
The switch component is triggered on click, toggling between the “on” and “off” states. It also displays a visible focus state when selected to support accessibility.
Keyboard
For keyboard navigation, users can focus the switch using the Tab key, with visual feedback indicating its focus. Pressing Enter or Space toggles the switch between the “on” and “off” states.
Always active
Some switches are designed to appear in the “on” state permanently and cannot be changed by the user. This behaviour is typically used to indicate:
- A setting that is enforced or required by system policy
- A feature that is active by default and cannot be disabled
- A visual cue to communicate a non-interactive but active condition
These switches are visually distinct – they do not display the switch control but instead show the text label “Always active,” as they do not respond to any user interaction.
Default switch
The default switch is larger than the small switch. It is commonly used in forms and full-page layouts where space is not limited. Default switches must include a visible label and status tag.
Small switch
The small switch is often used in condensed spaces and can appear inline with other components or content. Both the label and status tag are optional for the small switch.
Unlike the default switch, the small switch is more compact and displays a checkmark in the “on” state to maintain accessibility when no visible label or state text is present – for example, within data table rows.