Segmented control

A .re-segmented fieldset wraps native radio inputs, each in a .re-segmented__option label with a <span> pill. Because it’s real radios, arrow-key roving, single-selection, form submission, and :disabled are all native — no JavaScript. Give the fieldset an aria-label (or a <legend>) to name the group.

Basic

List Board Calendar

Live example

<fieldset class="re-segmented" aria-label="View">
  <label class="re-segmented__option">
    <input type="radio" name="view" value="list" checked />
    <span>List</span>
  </label>
  <label class="re-segmented__option">
    <input type="radio" name="view" value="board" />
    <span>Board</span>
  </label>
  <label class="re-segmented__option">
    <input type="radio" name="view" value="calendar" />
    <span>Calendar</span>
  </label>
</fieldset>

Sizes & states

data-size="sm" or "lg" on the fieldset; individual options can be disabled.

Compact Cozy

Day Week Month

Live example

<fieldset class="re-segmented" data-size="sm" aria-label="Density small">
  <label class="re-segmented__option">
    <input type="radio" name="d-sm" value="compact" checked />
    <span>Compact</span>
  </label>
  <label class="re-segmented__option">
    <input type="radio" name="d-sm" value="cozy" />
    <span>Cozy</span>
  </label>
</fieldset>
<fieldset class="re-segmented" data-size="lg" aria-label="Density large">
  <label class="re-segmented__option">
    <input type="radio" name="d-lg" value="day" checked />
    <span>Day</span>
  </label>
  <label class="re-segmented__option">
    <input type="radio" name="d-lg" value="week" />
    <span>Week</span>
  </label>
  <label class="re-segmented__option">
    <input type="radio" name="d-lg" value="month" disabled />
    <span>Month</span>
  </label>
</fieldset>

Accessibility

• Keyboard — fully native radio-group behavior, no JavaScript. Tab moves into the group, landing on the checked option; Arrow keys move between options, selecting as they go (roving focus). A shared name enforces single-selection, and the value submits with the form. A disabled option is skipped.
• Focus — the transparent radio sits over its option and stays focusable; the visible :focus-visible ring (--re-shadow-focus) is drawn on the <span> pill, so keyboard focus is clear while pointer clicks stay quiet.
• Semantics — a native <fieldset> of <input type="radio"> controls, so assistive tech announces a real radio group with position and count. Name the group with a <legend> or aria-label on the fieldset (the examples use aria-label); each radio’s <span> label supplies its accessible name.
• Notes — under forced colors (HCM) the selected pill loses its surface and shadow, so the checked option is marked with the system Highlight / HighlightText colors to keep the selection visible. See the accessibility guide.