Browse Components
Switch
Clear on/off settings with native keyboard behavior.
Basic
Click the label or press Space to toggle. This demo changes only its local state; nothing is saved.
View Code
<label class="switch">
<input type="checkbox" role="switch" name="notifications" value="enabled">
<span>
Project notifications
</span>
</label>Initially on
Use checked for the initial state. Keep the setting label the same in both states.
View Code
<label class="switch">
<input type="checkbox" role="switch" checked name="notifications" value="enabled">
<span>
Project notifications
</span>
</label>With a description
Connect useful context without making it part of the setting name.
Receive an update when a project you follow changes.
View Code
<div class="field">
<label class="switch">
<input
type="checkbox"
role="switch"
aria-describedby="notifications-help"
name="notifications"
value="enabled"
>
<span>
Project notifications
</span>
</label>
<p class="muted" id="notifications-help">
Receive an update when a project you follow changes.
</p>
</div>Disabled
Explain why a setting is unavailable. Disabled switches cannot be changed or submitted.
Your administrator manages this setting.
View Code
<div class="field">
<label class="switch">
<input
type="checkbox"
role="switch"
checked
disabled
aria-describedby="disabled-help"
name="notifications"
value="enabled"
>
<span>
Project notifications
</span>
</label>
<p class="muted" id="disabled-help">
Your administrator manages this setting.
</p>
</div>Long labels
The label wraps while the track stays aligned with the first line.
View Code
<label class="switch">
<input type="checkbox" role="switch" name="notifications" value="enabled">
<span>
Notify me when projects I follow receive new comments, updates, or review requests
</span>
</label>Right-to-left
Track position and thumb movement follow the reading direction.
View Code
<div dir="rtl" lang="he">
<label class="switch">
<input type="checkbox" role="switch" name="notifications" value="enabled">
<span>
התראות לפרויקט
</span>
</label>
</div>Without motion
The state changes immediately. Reduced-motion preferences also disable the thumb animation.
View Code
<div data-motion="none">
<label class="switch">
<input type="checkbox" role="switch" name="notifications" value="enabled">
<span>
Project notifications
</span>
</label>
</div>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/switch.css">9,502 bytes CSS including base · 0 bytes runtime JavaScript
Usage
Use it for a setting
Switches express on or off. Use a checkbox for consent or selections, and radio buttons to choose one of several options.
Keep the label stable
Name the setting, such as Project notifications. Do not change the name to match its state; the native control announces on or off.
Keep behavior native
Use input type="checkbox" role="switch" inside label.switch. Tab focuses it and Space toggles it. Do not duplicate checked state with ARIA.
Explain unavailable settings
Use native disabled and visible help text. Link descriptions with aria-describedby and keep other controls outside the label.
Connect saving deliberately
The component changes local state only. Your application owns saving, failure handling, and confirmation messages. Checked, enabled switches submit their name and value.
Respect motion preferences
The thumb uses shared 300ms motion and reverses in RTL. Reduced motion and data-motion="none" make it immediate.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.