Example#
Usage#
Use a switch for a setting that takes effect the moment it flips: notifications, a digest, a preference. The thumb carries a dash when off and a check when on, so the state reads without colour.
- A visible label is required;
showStateprints "On" or "Off" after it, for settings people check at a glance. - Choices inside a form that apply only when it is sent are a
Checkbox. - Motion. The thumb travels with the press easing; under reduced motion it moves at once.
Anatomy#
- Track48 × 28, pill shaped; on takes the selected face.
.mk-switch-track - ThumbA dash when off, a check when on.
.mk-switch-thumb - LabelNames the setting.
.mk-switch-label - StateOptional: On or Off in words.
.mk-switch-state
Volume#
Reading layer: identical at every volume.
Quiet
Studio
Press
Rave
Content#
- The label names the thing being switched: "Weekly digest", "Sound effects". It never asks a question.
- "On" and "Off" are the only state words; "Enabled" and "Active" mean the same thing with more letters.
Do and don't#
Do
Don't
Accessibility#
- A native checkbox with
role="switch": Space flips it and screen readers announce on or off. - The thumb's dash or check and the optional "On" or "Off" word carry the state without colour.
- Thumb travel is instant under reduced motion.
| Keys | What happens |
|---|---|
| Tab | Moves focus to the switch |
| Space | Turns it on or off |
The colour pairs it prints, with their contrast on both papers:
| Text | Surface | Role | Bone | Night |
|---|---|---|---|---|
--mk-ink-rule | --mk-paper | ui | 3.27:1 · Lc 56.5, passes | 3.65:1 · Lc 25.6, passes |
--mk-ink-rule | --mk-paper-sunken | ui | 3.01:1 · Lc 51.2, passes | 3.49:1 · Lc 25.2, passes |
--mk-ink-rule | --mk-paper-plate | ui | 3.65:1 · Lc 64.1, passes | 3.38:1 · Lc 24.8, passes |
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
label required | ReactNode | none | Required: the visible label. |
description | ReactNode | none | |
showState | boolean | none | Prints "On" / "Off" after the label (hidden from assistive tech, which hears the switch state). |
onLabel | string | none | |
offLabel | string | none | |
className | string | none | Lands on the row (`label.mk-switch`). |
style | CSSProperties | none | Lands on the row. |
Tokens#
System tokens (28)
--mk-border--mk-control--mk-control-rule--mk-disabled--mk-dur-press--mk-ease-pop--mk-focus--mk-font-text--mk-on-control--mk-on-selected--mk-radius-pill--mk-rule--mk-selected--mk-space-1--mk-space-2--mk-space-3--mk-target-touch--mk-text--mk-text-2--mk-text-disabled--mk-type-body-ui-leading--mk-type-body-ui-size--mk-type-body-ui-tracking--mk-type-body-ui-weight--mk-type-field-label-weight--mk-type-meta-leading--mk-type-meta-size--mk-type-meta-weight
Its own properties (8)
--mk-switch-face--mk-switch-h--mk-switch-knock--mk-switch-text-nudge--mk-switch-thumb--mk-switch-thumb-face--mk-switch-travel--mk-switch-w
Changelog#
Arrived in 0.1.0.
- The reading layer's controls, overlays, forms and visitor prefs (P2-T1 to P2-T5): every Button is the comic hit key, with IconButton, Link and Tooltip; Input, Textarea, Select, Checkbox and CheckboxGroup, Radio and RadioGroup, Switch, Slider with the ruler, RulerReadout and SegmentedControl; Dialog, Drawer, NavSheet, Tabs, Disclosure, Faq and faqJsonLd on Base UI 1.9 where the platform falls short; Field, Fieldset, Form with the site's inline validation, ErrorSummary, Callout, Honeypot, FormTimestamp and QuoteForm; PrefsScript under 1 KB, usePref and setPref with cross-tab sync, ThemeToggle and the visitor VolumeDial; VisuallyHidden.