Segmented control

Basic — two options

<div class="bo-segmented" role="group" aria-label="Approval scope">
  <input class="bo-segmented__input bo-visually-hidden" type="radio" name="seg-scope" id="seg-mine" checked>
  <label class="bo-segmented__option" for="seg-mine">My approvals</label>
  <input class="bo-segmented__input bo-visually-hidden" type="radio" name="seg-scope" id="seg-team">
  <label class="bo-segmented__option" for="seg-team">Team approvals</label>
</div>

Click a segment, or Tab to the group and use arrow keys — real radio-group keyboard navigation, not reimplemented.

Three options

<div class="bo-segmented" role="group" aria-label="Report range">
  <input class="bo-segmented__input bo-visually-hidden" type="radio" name="seg-range" id="seg-week" checked>
  <label class="bo-segmented__option" for="seg-week">Week</label>
  <input class="bo-segmented__input bo-visually-hidden" type="radio" name="seg-range" id="seg-month">
  <label class="bo-segmented__option" for="seg-month">Month</label>
  <input class="bo-segmented__input bo-visually-hidden" type="radio" name="seg-range" id="seg-quarter">
  <label class="bo-segmented__option" for="seg-quarter">Quarter</label>
</div>

Saved views, with their size

<div class="bo-segmented" role="group" aria-label="Saved views">
  <input class="bo-segmented__input bo-visually-hidden" type="radio" name="seg-view" id="seg-all" checked>
  <label class="bo-segmented__option" for="seg-all">All open <span class="bo-u-text-muted bo-u-tabular">128</span></label>
  <input class="bo-segmented__input bo-visually-hidden" type="radio" name="seg-view" id="seg-blocked">
  <label class="bo-segmented__option" for="seg-blocked">Blocked <span class="bo-u-text-muted bo-u-tabular">9</span></label>
  <input class="bo-segmented__input bo-visually-hidden" type="radio" name="seg-view" id="seg-mine2">
  <label class="bo-segmented__option" for="seg-mine2">Mine <span class="bo-u-tabular bo-u-text-muted">14</span></label>
</div>

The count is usually the load-bearing half: "Blocked 9" is what makes a clerk click, while "Blocked" alone is a filter nobody knows the size of. It needs no part and no modifier — an option is a flex container with a gap, so a second child sits beside the label. Use muted tabular text, not a badge: a badge is a status chip and a count is not a status, and at compact density a badge is 24px tall inside a 24px segment — measured — so it fills the option edge to edge. Where there IS room and the number really is a status (a task tile, a nav row), the badge is right. Tabular figures keep the numbers from shifting the option's width as they change.

Disabled option

<div class="bo-segmented" role="group" aria-label="Export format">
  <input class="bo-segmented__input bo-visually-hidden" type="radio" name="seg-export" id="seg-csv" checked>
  <label class="bo-segmented__option" for="seg-csv">CSV</label>
  <input class="bo-segmented__input bo-visually-hidden" type="radio" name="seg-export" id="seg-pdf" disabled>
  <label class="bo-segmented__option" for="seg-pdf">PDF (Pro)</label>
</div>

A locked-behind-a-plan format, for example — disable the input, not the whole group.

Markup

<!-- A radiogroup, not styled buttons: keyboard arrow-navigation between
     options, "n of m" announcement, and mutual exclusivity all come from
     the platform. Inputs are .bo-visually-hidden (kept focusable), not
     display:none — the ring moves to the label via the input's sibling
     selector, so it traces the visible segment. -->
<div class="bo-segmented" role="group" aria-label="View">
  <input class="bo-segmented__input bo-visually-hidden" type="radio" name="view" id="view-mine" checked>
  <label class="bo-segmented__option" for="view-mine">My approvals</label>
  <input class="bo-segmented__input bo-visually-hidden" type="radio" name="view" id="view-team">
  <label class="bo-segmented__option" for="view-team">Team approvals</label>
</div>

Quick reference generated

API generated from CSS

• A real <input type="radio"> per option, sharing one name — mutual exclusivity, keyboard arrow navigation, and screen-reader group semantics all come from the platform, not from JS.
• The input carries BOTH classes — .bo-segmented__input for the state selectors, .bo-visually-hidden to hide it visually while staying focusable (never display:none, which would drop it from the Tab order entirely). Its :focus-visible ring is moved onto the label sibling via CSS so it traces the visible segment.
• Wrap the group in role="group" with an aria-label naming what the options select (native radio groups have no accessible name of their own).
• No more than ~5 options — beyond that, a select or dropdown reads better than a wide row of segments.

Maturity generated

Introduced

v0.3.0

CSS floor

Chrome/Edge 99 · Firefox 97 · Safari 15.4

Alignment scored

2026-08-21

Assistive-tech evidence

None recorded

Pin this component's first release with npm i @busy-office/ui@0.3.0. The floor is derived from this component's stylesheet alone — set by @layer — so it sits at or below the whole framework's Chrome/Edge 119 · Firefox 129 · Safari 17.5. No assistive-technology runtime result is recorded for any component: it needs a human listening to VoiceOver and NVDA on owner hardware; no gate in this repo can simulate announcement behaviour. What automation covers instead is test:axe across every page at 1440 and 390, and check:forced-colors — see accessibility.

Design-system alignment generated

100% (18/18) — how closely this component follows the design language. Each rule is scored 0-3 against a checkable citation; rules that don't apply leave the denominator. Scored 2026-08-21.