Toggle
Toggles switch the selection of an item on or off
- Use toggles (not radio buttons) if the items in a list can be independently controlled
- Toggles 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 Toggle
Sizes
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 toggles to select standalone or more verbose options in a list, like settings.
On this page
import { Field, Toggle, useToggle } from '@cerberus/react'Usage
Disabled
With Label
With Message
When you need to display a message along with a Label, you can use the FieldMessage component.
Sizes
Customizing
To customize the style of the Toggle, we recommend the toggle slot recipe provided by the styled-system package, combined with css functions.
API
export interface FieldProps { disabled?: boolean invalid?: boolean required?: boolean readOnly?: boolean}
define function Field(props: PropsWithChildren<FieldProps>): ReactNodeexport interface RadioProps extends InputHTMLAttributes<HTMLInputElement> { id: string size?: 'sm' | 'md' | 'lg'}
define function Radio(props: RadioProps): ReactNodeProps
The Radio component accepts the following props:
| Name | Default | Description |
|---|---|---|
| id | An identifier that is shared with the Label htmlFor attribute. | |
| size | md | The size of the input field. |
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