Example#
Usage#
Use a segmented control to switch between two to five views or modes of the same thing: grid or list, monthly or yearly, Bone or Night. It is a native radio group, so it works inside a form without JavaScript.
- Changes at once. The selected segment takes the selected face and an inner ink ring at once, with no sliding pill, so chrome stays calm (D-H1).
- More than five options, or long labels, belong in a
Selector aRadioGroup. - Answering a question in a form is a
RadioGroup; a segmented control switches what you are looking at. - Sizes.
md44 px (default) andsm36 px, still 44 px on touch screens. Each option may carry a glyph.
Anatomy#
- GroupA 2 px ink rule around equal segments.
.mk-segmented-control - SegmentA native radio; selected takes the face and an inner ring.
.mk-segmented-control-segment - LabelControl role, one or two words.
.mk-segmented-control-label
Volume#
Reading layer: identical at every volume.
Quiet
Studio
Press
Rave
Content#
- One or two words per segment, parallel in form: "Grid" and "List", "Monthly" and "Yearly".
- The group's name says what it switches: "View", "Billing".
- Never mix a setting and an action in one control.
Do and don't#
Do
Don't
Accessibility#
- Native radios: it works without JavaScript inside a form; arrows move and select.
- The selected segment takes the selected face and an inner ink ring.
| Keys | What happens |
|---|---|
| Tab | Moves into the group, onto the selected segment |
| Arrow keys | Select the next or previous segment |
The colour pairs it prints, with their contrast on both papers:
| Text | Surface | Role | Bone | Night |
|---|---|---|---|---|
--mk-ink | --mk-paper-hover | body-ui | 17.99:1 · Lc 103.4, passes | 16.94:1 · Lc 96.5, passes |
--mk-ink | --mk-paper-sunken-hover | body-ui | 16.63:1 · Lc 98.0, passes | 16.46:1 · Lc 96.3, passes |
--mk-ink | --mk-paper-plate-hover | body-ui | 16.90:1 · Lc 99.1, passes | 16.02:1 · Lc 96.0, passes |
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
name required | string | none | The radio group name (required: it posts with the form). |
label required | string | none | The group's accessible name (visible text elsewhere can name it through `aria-labelledby`). |
options required | readonly SegmentedOption[] | none | |
value | string | none | |
defaultValue | string | none | |
onValueChange | ((value: string) => void) | none | |
size | "md" | "sm" | none | 44 px (`md`) or 36 px (`sm`, still ≥ 44 under coarse pointers). |
disabled | boolean | none | |
aria-labelledby | string | none | |
className | string | none | |
style | CSSProperties | none | |
id | string | none |
Tokens#
System tokens (19)
--mk-border--mk-control--mk-disabled--mk-focus--mk-font-text--mk-hover--mk-on-control--mk-on-selected--mk-radius-control--mk-selected--mk-space-2--mk-space-4--mk-target-touch--mk-text--mk-text-disabled--mk-type-control-sm-leading--mk-type-control-sm-size--mk-type-control-sm-tracking--mk-type-control-sm-weight
Its own properties (1)
--mk-segmented-h
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.
- SegmentedControl, Tabs and CodeBlock draw LC-05's ring outside the focused key (2 px at 2 px) instead of inset; RadioGroup and CheckboxGroup keys and cards, VolumeDial stops and link Cards mark the element that draws the ring (
data-mk-focus-ring); a focusable VisuallyHidden draws the ring. Read the whole entry