Switch
Toggle for settings that take effect immediately. In Figma this is “Toggle”.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="stack">
<label class="px-switch"><input type="checkbox" role="switch" class="px-switch__track" checked> Email notifications <span class="px-check__hint">Get an email when someone mentions you.</span></label>
<label class="px-switch"><input type="checkbox" role="switch" class="px-switch__track"> Dark mode</label>
</div>Usage
- No Save button: the change applies at once.
- Label says what is on, not “Enable/Disable”.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Sizes
Small, Medium and Large.
<div class="row">
<label class="px-switch px-switch--sm"><input type="checkbox" role="switch" class="px-switch__track" checked> Small</label>
<label class="px-switch"><input type="checkbox" role="switch" class="px-switch__track" checked> Medium</label>
<label class="px-switch px-switch--lg"><input type="checkbox" role="switch" class="px-switch__track" checked> Large</label>
</div>Disabled
<div class="row">
<label class="px-switch"><input type="checkbox" role="switch" class="px-switch__track" disabled> Off</label>
<label class="px-switch"><input type="checkbox" role="switch" class="px-switch__track" checked disabled> On</label>
</div>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-switch | class | Label wrapper. |
px-switch__track | class | Put on <input type="checkbox" role="switch">. |
px-switch--sm · --lg | class | Size. |
Figma properties
Toggle60 variants · page “Toggles”Open
Switch with label and optional hint for settings that take effect immediately. RTL places the switch on the right. RTL text: Label/Hint properties drive LTR variants; in RTL instances edit the Arabic …
| Property | Type | Values |
|---|---|---|
| Label | Text | “Email notifications” |
| Hint | Text | “Get an email when someone mentions you.” |
| Show hint | Boolean | — |
| Size | Variant | Small Medium Large |
| On | Variant | False True |
| State | Variant | Active Hover Pressed Focused Disabled |
| Direction | Variant | LTR RTL |
Toggle / Control60 variants · page “Toggles”Open
The bare switch. Applies immediately (no Save button). In RTL the On knob sits on the left. role=switch with aria-checked.
| Property | Type | Values |
|---|---|---|
| Size | Variant | Small Medium Large |
| On | Variant | False True |
| State | Variant | Active Hover Pressed Focused Disabled |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-toggle-width-sm | 28px | 28px |
--px-toggle-height-sm | spacing-16 | 16px |
--px-toggle-knob-sm | 12px | 12px |
--px-toggle-width-md | 36px | 36px |
--px-toggle-height-md | spacing-20 | 20px |
--px-toggle-knob-md | 16px | 16px |
--px-toggle-width-lg | 44px | 44px |
--px-toggle-height-lg | spacing-24 | 24px |
--px-toggle-knob-lg | 20px | 20px |
--px-toggle-padding | 2px | 2px |
--px-toggle-radius | radius-full | 999px |
--px-toggle-gap | spacing-12 | 12px |
Accessibility
- role="switch" announces on/off.
- In RTL the knob mirrors.