FORMS · FORM ELEMENTS

Switches

On/off settings that apply immediately — with async saves, rollback, confirmation, dependencies and integrations.
THEME
DENSITY
01

Playground

Size, label, description, style, state — live
PREVIEWLive · on
Show weekends in calendarSaturday and Sunday columns in every week view
ACCESSIBILITY TREE
roleswitch
name"Show weekends in calendar" · aria-labelledby
checkedtrue
description"Saturday and Sunday columns…"
statesnone
Settings
SIZE
LABEL
DESCRIPTION
STYLE
STATE
CODE
<Switch label="Show weekends in calendar" description="Saturday and Sunday columns…" checked={true} onChange={save}/>
02

Variants

8 patterns, all working
Settings rowstitle · description · switch on the right
Compact sidebarIcons only, labels on hover
Notification soundsA soft chime for mentions and replies
Early access featuresTry new things before everyone else
Share usage analyticsAnonymous, helps us improve Avava
Async savespinner in the knob · rollback on failure
Auto-send invoice remindersSaved to the server — the knob shows a spinner while it saves
Needs confirmationrisky “off” asks first
Two-factor authenticationCodes from your authenticator app
Turning it on is instant. Turning it off asks first — a switch with a dialog is still a switch.
Dependentchildren follow the parent
Email notificationsChoose which ones below
Mentions
Replies to my comments
Weekly digest
Select allmaster shows mixed
All channels2 of 3 on
Slack
Email
Mobile push
Status colourscolour + label, never colour alone
Campaign is liveAds are running on 3 channels
Hold all invoicesInvoices go out on schedule
Maintenance modeClient portal is open
Card switchesmodules with a price
Time tracking$4 / seat
Invoicing$6 / seat
Client portal$8 / seat
Asset library$5 / seat
Add-ons: +$14 / seat / month
Two-way segmentedwhen both states need a name
Billing
Yearly — $490 per seat, billed once. A switch would hide what “off” means — Monthly and Yearly are both valid choices.
03

States

Off / on × 7 states, per size
SIZE
DEFAULTHOVERFOCUSPRESSEDLOADINGDISABLEDREAD-ONLYOffOn
Track32 / 40 / 52 × 18 / 22 / 28 px · off 20% ink · on cyan
Knob14 / 18 / 24 px white · 2 px inset · stretches 5 px when pressed
Focus2 px gap + 2 px cyan ring, keyboard and pointer
LoadingSpinner inside the knob, aria-busy, clicks ignored
Disabled / read-only45% opacity / on colour at 55%, cursor default
MotionSpring 220 ms on the knob, colour fades with it
04

Behavior

Keyboard & swipe, instant vs form, motion
Keyboard, click & swipeSpace · Enter · label · drag the knob
Show week numbers
Snap events to 15 min
Highlight today
SpaceToggleEnterToggleClick labelToggleDrag knobSwipe on / off
EVENT LOGClick, press Space, or drag a knob sideways.
Instant vs formswitch applies now · checkbox waits for Save
SWITCH · INSTANT
Dark mode
Takes effect the moment you flip it
CHECKBOX · ON SAVENothing to save
Motionspring knob · respects reduced motion
EASING
SYSTEM
knob: left .22s cubic-bezier(.3,1.45,.5,1)
05

In Avava

Workspace settings, integrations, notifications
Workspace settingsevery row saves on its own
Public studio profileavava.studio/olivia is visible to everyone✓ Saved
Client portalClients can log in to approve files✓ Saved
Time trackingShow the timer on every task✓ Saved
Auto-invoicingDraft invoices from tracked time each Friday✓ Saved
Integrationsswitch starts a connection
S
Slack✓ Connected as olivia@avava.studio · Post approvals to #studio
D
Google DriveSync final files to a shared folder
F
FigmaEmbed live frames in briefs
Notificationspause all · quiet hours
Pause all notificationsMute everything for focus time
Quiet hoursNo push or Slack between these times
Mentions
Client approvals
Due tomorrow
Quiet from 20:00 to 08:00 · 2 of 3 types on
06

Rules & a11y

When to use a switch, labels, screen readers
Switch, checkbox or radio?pick by behaviour
Switch
A setting that applies right awayDark mode, notifications, integrations
Checkbox
Part of a form that’s submittedTerms, export options, filters on Apply
Radio / segmented
Two named options, both validMonthly vs Yearly, List vs Grid
Button
An action, not a stateConnect, Publish, Send
Write positive labelsthe switch already says on / off
Disable soundsNotification sounds
Don’t share analyticsShare usage analytics
Hide weekendsShow weekends
Turn on dark modeDark mode
Screen readersa button with role="switch"
✓<button role="switch" aria-checked>Announced as “switch, on / off” — not “checkbox”
✓aria-labelledby → labelThe visible label is the name; the description goes in aria-describedby
✓Space and Enter toggleNative button behaviour, plus Space
✓aria-busy while savingAnd clicks are ignored until it settles
✓aria-checked="mixed"Only for a master switch of a group
✓State isn’t colour aloneKnob position and optional ✓ / ✕ icons
DO✓Apply the change immediately — no Save button✓Write the label as the thing that’s on: “Notification sounds”✓Show saving and roll back clearly on failure✓Ask before switching off something risky✓Explain why a dependent switch is disabled
DON’T✕Use a switch inside a form that needs Submit✕Write negative labels like “Disable sounds”✕Use a switch for two named options — use segmented✕Rely on green and red alone✕Make the label not clickable