Design system/Components
On/off switch
A switch turns a setting on or off immediately, with no save button. It's the same old .toggle, which now has the switch role, the aria-checked state, a focus ring, and a disabled state.
In codecomponents/controls.tsx (Switch)app/globals.css (.toggle)
Live example
Email reminderOne day before the due date.
Weekly summary
Security notificationsAlways on.
Off
On
Inactive
Size and motion
Track
36 × 21px · r 999pxOff / on
var(--toggle-off) / var(--accent)Handle
16px #fff · shadow 0 1px 3pxMove
translateX(15px) · 0.28s cubic-bezier(0.34, 1.56, 0.64, 1)Press
Handle stretches to 20px · 0.15sTouch area
Invisible ring ::beforepointer: coarseRow with label
min-height 44px · gap 12pxFocus / disabled
outline 2px accent · opacity 0.45Rules
Do
The label is the name of the thing being turned on: “Email reminder”.
Don't
An “On/Off” label next to the switch; the switch itself shows its state.
Do
If turning it on takes time or fails, flip the switch back and say why.
Don't
A switch that stays on even though the server rejected it.
Do
Switch with ariaLabel or label.
Don't
A <button className="toggle"> with no role; screen readers only read “button”.
Code
<Switch checked={on} onChange={setOn} label={tr("یادآور ایمیلی")} />
<Switch checked={f.enabled} onChange={(v) => toggle(f.key, v)} ariaLabel={tr("تغییر وضعیت *").replace("*", f.label)} />Related pages