A switch turns one setting on or off and applies the change at once. It is for a single binary choice, not for picking between options.
Tokens, sizes, measurements, states and requirements. Values come from the live token package and from Figma: Toggle Switch.
Resolved from the live token package.
| Mode · state | Part | Token | Value |
|---|
Open points: two colors have no token: the hover On track (#71b790) and the disabled On track (rgba(36, 134, 22, 0.5)). They are written out with a comment.
| Size | Track | Thumb | Inset | Travel | Label |
|---|---|---|---|---|---|
| Large | 48×24px | 20px | 2px | 24px | body-md: 16/22, from 769px 17/24, 0.32px |
| Small | 48×24px | 20px | 2px | 24px | body-sm: 14/20, 0.36px |
| X-Small | 32×16px | 12px | 2px | 16px | body-sm: 14/20, 0.36px |
The size does not change with the breakpoint; only the Large label does.
| Attribute | Large and Small | X-Small |
|---|---|---|
| Track | 48×24px, a pill (border-radius: 999px) | 32×16px |
| Thumb | 20px circle | 12px circle |
| Inset, thumb to track edge | 2px | 2px |
| Travel of the thumb | 24px | 16px |
| Gap to the label | 8px | 8px |
| Focus ring | 2px line, 2px offset | 2px line, 2px offset |
| Label line height | 22px mobile, 24px from 769px (Large); 20px (Small) | 20px |
A switch has no padding or margin of its own, so there is no measurement figure: the track is the box and the thumb sits 2px inside it.
The gap to the label as a spacing token.
| Part | Value |
|---|---|
| Gap, track to label | space-8 |
| Thumb inset | 2px: literal, no spacing token |
| Focus ring offset | 2px |
Enabled, hover, focus and disabled, each off and on. Hover and focus are forced on this page; in your code they come from :hover and :focus-visible.
| State | Off | On |
|---|
| Part | Type | Size / line height | Letter spacing | Weight |
|---|---|---|---|---|
| Label, Large | body-md | 16/22 mobile, 17/24 from 769px | 0.32px | Regular |
| Label, Small and X-Small | body-sm | 14/20 | 0.36px | Regular |
Breuer Condensed with ss02, ss03 and ss06. Some desktop Small and X-Small variants in Figma imply a smaller width than the 14px label: the CSS uses 14/20 for both.
| Element | Class | Notes |
|---|---|---|
| Item | form-switch-item, --sm, --xs, --dark | The label around the input and the text. |
| Track and thumb | input[type="checkbox"][role="switch"] | appearance: none on the native input. The thumb is its ::before. |
| Label text | span | Optional. Without it the input needs an aria-label. |
| Type | Class | Use |
|---|---|---|
| Large | form-switch-item | The default. |
| Small | form-switch-item--sm | Same track, smaller label. |
| X-Small | form-switch-item--xs | Dense layouts: 32×16px track. |
| Dark | form-switch-item--dark | On surface-100 or surface-80. |
An item is as wide as the track plus its label.
| Property | Duration | Easing |
|---|---|---|
background-color of the track | duration-fast-3 | ease-standard |
transform of the thumb | duration-fast-3 | ease-standard |
Reduced motion (prefers-reduced-motion: reduce) turns the transition off. Figma specifies no thumb animation: this is the default for form elements in eco-motion. Open point: confirm with design.
| Input | Result |
|---|---|
| Click switch or label | Toggles on and off, and the change applies at once. |
| Space | Toggles the focused switch. |
| Tab | The ring shows on keyboard focus only (:focus-visible), for both off and on. |
| Markup | A native input type="checkbox" role="switch" inside a label. Never a div or button imitation. |
| Disabled | Not focusable. Muted track, no thumb shadow, text-disabled label. |
| Motion | Reduced motion turns the transition off. |
| Topic | Requirement |
|---|---|
| Element | A native <input type="checkbox" role="switch"> in a <label>. The name, the role and the on/off state are announced. |
| Name | A visible label, or aria-label when the setting is named by its surroundings. |
| Focus | Ring with border-focus, 2px, offset 2px, on :focus-visible (WCAG 2.4.7, 1.4.11). |
| Color | On and off differ in the position of the thumb as well as the track color (WCAG 1.4.1). |
| Effect | The change applies at once. A switch that needs a Save button is a checkbox. |
| Motion | Reduced motion turns the transition off (WCAG 2.3.3). |
| Disabled | Not focusable. Disabled tokens are exempt from contrast requirements. |