Switch
Switches toggle the selection of a form item on or off
Use Cases
- Users should be able to:
- Navigate to a toggle with keyboard/switch input
- Switch the toggle on and off
- Get appropriate feedback based on input type documented under Interaction & style
Interaction & Style
The toggle handle increases in size to indicate interactivity for both touch and cursor control interactions.
Touch When tapped or dragged, the handle size grows, providing interaction feedback.
Cursor When hovered (in both on and off states), the hover area grows, providing a visual cue to the user that the handle is interactive. When clicked, the handle size grows.
Initial Focus
Initial focus lands directly on the toggle's handle, since it's the primary interactive element of the component.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on the toggle handle |
| Space / Enter | Toggles the handle on and off |
Labeling Elements
The accessibility label for a toggle uses the adjacent label text if implemented correctly. Assistive tech (such as a screen reader) will read the UI text followed by the component's role.
Some accessibility labels require more descriptive text, particularly when the visible UI text is ambiguous. For example, a toggle visibly labelled “Photo album” would benefit from additional information in its accessibility label to clarify the toggle's function.
However, consider making the adjacent label text more descriptive when possible. This reduces the need for different accessibility text.
Use Cases
- Users should be able to:
- Navigate to a toggle with keyboard/switch input
- Switch the toggle on and off
- Get appropriate feedback based on input type documented under Interaction & style
Interaction & Style
The toggle handle increases in size to indicate interactivity for both touch and cursor control interactions.
Touch When tapped or dragged, the handle size grows, providing interaction feedback.
Cursor When hovered (in both on and off states), the hover area grows, providing a visual cue to the user that the handle is interactive. When clicked, the handle size grows.
Initial Focus
Initial focus lands directly on the toggle's handle, since it's the primary interactive element of the component.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on the toggle handle |
| Space / Enter | Toggles the handle on and off |
Labeling Elements
The accessibility label for a toggle uses the adjacent label text if implemented correctly. Assistive tech (such as a screen reader) will read the UI text followed by the component's role.
Some accessibility labels require more descriptive text, particularly when the visible UI text is ambiguous. For example, a toggle visibly labelled “Photo album” would benefit from additional information in its accessibility label to clarify the toggle's function.
However, consider making the adjacent label text more descriptive when possible. This reduces the need for different accessibility text.
Use Cases
- Users should be able to:
- Navigate to a toggle with keyboard/switch input
- Switch the toggle on and off
- Get appropriate feedback based on input type documented under Interaction & style
Interaction & Style
The toggle handle increases in size to indicate interactivity for both touch and cursor control interactions.
Touch When tapped or dragged, the handle size grows, providing interaction feedback.
Cursor When hovered (in both on and off states), the hover area grows, providing a visual cue to the user that the handle is interactive. When clicked, the handle size grows.
Initial Focus
Initial focus lands directly on the toggle's handle, since it's the primary interactive element of the component.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on the toggle handle |
| Space / Enter | Toggles the handle on and off |
Labeling Elements
The accessibility label for a toggle uses the adjacent label text if implemented correctly. Assistive tech (such as a screen reader) will read the UI text followed by the component's role.
Some accessibility labels require more descriptive text, particularly when the visible UI text is ambiguous. For example, a toggle visibly labelled “Photo album” would benefit from additional information in its accessibility label to clarify the toggle's function.
However, consider making the adjacent label text more descriptive when possible. This reduces the need for different accessibility text.
Use Cases
- Users should be able to:
- Navigate to a toggle with keyboard/switch input
- Switch the toggle on and off
- Get appropriate feedback based on input type documented under Interaction & style
Interaction & Style
The toggle handle increases in size to indicate interactivity for both touch and cursor control interactions.
Touch When tapped or dragged, the handle size grows, providing interaction feedback.
Cursor When hovered (in both on and off states), the hover area grows, providing a visual cue to the user that the handle is interactive. When clicked, the handle size grows.
Initial Focus
Initial focus lands directly on the toggle's handle, since it's the primary interactive element of the component.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on the toggle handle |
| Space / Enter | Toggles the handle on and off |
Labeling Elements
The accessibility label for a toggle uses the adjacent label text if implemented correctly. Assistive tech (such as a screen reader) will read the UI text followed by the component's role.
Some accessibility labels require more descriptive text, particularly when the visible UI text is ambiguous. For example, a toggle visibly labelled “Photo album” would benefit from additional information in its accessibility label to clarify the toggle's function.
However, consider making the adjacent label text more descriptive when possible. This reduces the need for different accessibility text.