INPUTS / COMPONENTS
Toggle
Apply a setting immediately.
About toggle
Use the Toggle for individual boolean choices that can be between on and off states exclusively. When dealing with a cell containing multiple selectable options, consider employing Checkbox instead.
01
Anatomy
Shared parts, named consistently.
- 1Toggle thumbRequired
A small, movable graphical indicator that slides within the track to represent the Toggle's current state.
- 2Unchecked iconRequired
The icon to indicate the Toggle is unchecked,
- 3Toggle trackRequired
The container of the thumb.
- 4Toggle label
The label of the Toggle.
- 5Checked iconRequired
The icon to indicate the Toggle is checked.
Try the default
A working example with the shared V1 visual language.
When to use
Use for a binary preference that takes effect immediately. Keep the label constant in both states.
Tab focuses; Space changes the native switch state.