Switch
Switches toggle the selection of a form item on or off
- Use Switches (not radio buttons) if the items in a list can be independently controlled
- Switches are the best way to let users adjust settings
- Make sure the toggle's selection (on or off) is visible at a glance
Example
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
Standard Switch
Alternate selection controls
Checkboxes, radio buttons, and toggles are the three main types of selection controls. They help people make choices, like selecting options or turning settings on and off.
Use checkboxes to select multiple related options in a list.
Use radio buttons to select a single option in a list.
Use switches to select standalone or more verbose options in a list, like settings.
On this page
import { Switch, SwitchParts } from '@cerberus/react'Usage
With Field
To use the Switch within a form, wrap it with the Field component.
Sizes
Primitives
You can utilize the primitive components to customize the checkbox.
| Component | Description |
|---|---|
| SwitchRoot | The context provider for the switch parts |
| SwitchLabel | The label of the switch |
| SwitchControl | The visual input of the switch |
| SwitchThumb | The thumb of the switch state |
| SwitchHiddenInput | The native input for the switch |
API
Props
The Switch component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| size | sm | This size of the Switch. |
The Switch component also accepts all the props of the SwitchRoot primitive props
Parts
The SwitchParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The SwitchRoot component which is the Provider for the family. |
| Label | The SwitchLabel component which displays the label. |
| Control | The SwitchControl component which is the visual field. |
| Thumb | The SwitchThumb component which displays the thumb of the switch. |
| HiddenInput | The SwitchHiddenInput component which displays the native input. |
On this page
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.
On this page