Segmented
Segmented button with Material SegmentedButton anatomy in Lozenge tokens, on a native radio group (zero JS; arrow keys are the platform's): a single hairline outline around the group, shared divider lines between segments, full stadium ends, transparent unselected segments, and a leading checkmark that animates in on the selected segment. .segmented-bold fills the selection with accent-bold; .segmented-compact is 24px.
Root: .segmented on <fieldset>
Examples
<fieldset class="segmented" aria-label="View"><input type="radio" name="view" id="view-board" checked><label for="view-board">Board</label><input type="radio" name="view" id="view-list"><label for="view-list">List</label><input type="radio" name="view" id="view-timeline"><label for="view-timeline">Timeline</label></fieldset><fieldset class="segmented segmented-bold segmented-compact" aria-label="Density"><input type="radio" name="density" id="d-cozy" checked><label for="d-cozy">Cozy</label><input type="radio" name="density" id="d-compact"><label for="d-compact">Compact</label></fieldset>Contract
Variants & modifiers
| Class | Axis | Rules |
|---|---|---|
segmented-bold | emphasis | optional · exclusive |
segmented-bold | modifier | optional |
segmented-compact | modifier | optional |
Structure
| Selector | Required | Description |
|---|---|---|
input[type=radio] | required | Visually-hidden radios as DIRECT children of the fieldset. All share one name (unique per group on the page); exactly one carries checked. Each label must be the immediate next sibling of its radio — the CSS selects input:checked + label. |
label | required | One <label> per segment, immediately following its radio, with for matching that radio's id. Labels are the visible segments; first/last get the outer corner radii. |
Accessibility
| On | Attribute | Level | When |
|---|---|---|---|
.segmented | aria-label | required |
Keyboard support is native radio-group behavior: Tab enters the group, arrow keys move the selection (which is also the activation) — add no ARIA roles on top of the radios. The fieldset provides the grouping; aria-label names it (a visually-hidden <legend> also works, but keep the aria-label for the lint contract). Focus shows a ring on the focused segment's label. Disable a single segment by disabling its input.
Nesting
Allowed in:
toolbarscard headersfilter rowsforms
Never inside (or containing):
.segmented.btn-group