Switch
Note
An element that toggles between two binary options.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). | |
| Accessibility: Keyboard interactions | Includes descriptions of all keyboard interactions, focus indication and navigation order. | |
| Accessibility: Text contrast | Text meets a contrast ratio of at least 4.5:1 for small text and 3:1 for large text (WCAG 2.0 1.4.3) and/or a lightness contrast value of at least Lc 75 for standard text and Lc 60 for large text (APCA). | |
| Accessibility: UI component contrast | Visual information required to identify states and boundaries of active UI components has a contrast ratio against adjacent colors of at least 3:1 (WCAG 2.1 1.4.11) and/or a lightness contrast value of at least Lc 60 (APCA). | |
| Usage guidelines | Includes a list of recommended and discouraged usages. | |
| Content guidelines | Includes content standards and guidelines for how to write or format in-product content for the component. | |
| Internationalization | Includes support for various locales and bi-directionality (RTL). | |
| Design tokens | All design attributes (color, typography, layout, animation, etc.) are available as design tokens. |
Anatomy
- Track: The background surface on top of which the thumb moves.
- Thumb: The element that moves along the track to indicate the current state.
- Icon: An optional visual element on the thumb that represents the value state of the switch.
States
Interaction states
Enabled
- Interaction with the switch is available.
Hovered
- The cursor is currently positioned over the track or thumb, indicated by the pointer cursor and a dim halo surrounding the thumb.
Pressed
- The cursor is currently clicking on the track or thumb, indicated by the enlargement of the thumb.
Focused
- The switch is focused via keyboard interaction, indicated by a ring outline around the track.
Disabled
- Interaction with the switch is disallowed, indicated by a muted appearance and the disallowed cursor.
- Interaction with the switch is disallowed, indicated by a muted appearance and the disallowed cursor.
Value states
Unchecked
- The switch's unchecked state is indicated by the thumb being positioned on the left side of the track, the gray color track, and an optional dash icon.
Checked
- The switch's checked state is indicated by the thumb being positioned on the right side of the track, the green or accent color track, and an optional checkmark icon.
Options
Color
- By default, in the checked state, the track and its optional icon are colored green.
- The theme's accent color can be used instead to indicate the checked state.
Size
- Switches are available in small, medium and large sizes.
- Small is the default switch size.
Icon
- Icons can be optionally displayed on the thumb to represent the value state of the switch.
Behaviors
[!missing] Section is incomplete