Switch & toggle
Flip an on/off setting. Use when the change is immediate and persistent — never to commit a form.
Usage
A switch is for a single binary preference. Flipping it should apply immediately, with no Save button required.
States
Off
On
Off · disabled
On · disabled
In settings rows
The standing settings layout: title left, switch right.
Auto-reconcile cash on shift close
Reconciles counted cash against expected when a cashier closes their till.
Send daily Z-report by email
Branch managers receive a PDF every day at 19:30.
Lock POS after 8 hours
Requires the supervisor PIN to reopen.
Anatomy
| Property | Value | Notes |
|---|---|---|
| size | 38 × 22 px | Knob 18 × 18 |
| radius | 9999 px | Always pill |
| off | --border-strong | — |
| on | --tone-info | Brand-ish; not the brand itself |
| transition | 120 ms ease-out | knob translateX |
Do & don't
Do
Apply switch changes immediately. Show a toast if the change isn't obvious from the surface.
Don't
Pair a switch with a Save button. Use a checkbox for form-style changes.
Do
Label what the ON state does. "Auto-reconcile" tells the user what flipping it on means.
Don't
Use switch for irreversible actions. Switches imply you can flip them right back.
Code
<input type="checkbox" class="switch">