Segmented

Pill-style selector for mutually-exclusive choices in one visual unit — view modes (grid / list), time ranges (day / week / month), sort orders, density presets, tabs inside a toolbar. Visually and semantically distinct from Tabs (which own content panels below) — use Segmented for filter/state switches; use Tabs when each option reveals different content.

a11y (built in): segments are real <button>s; in radio mode the controller adds role="radiogroup" to the group and role="radio" + aria-checked to each segment, while toggle mode leaves the native button role and tracks aria-pressed. One roving tab stop sits on the selected segment (first enabled one if none is selected): ←/→/↑/↓ wrap around and skip disabled segments — auto-selecting in radio mode, moving focus only in toggle mode — Home/End jump to the ends and Space/Enter activate. Icon-only segments need their own aria-label because the glyph span is aria-hidden, and the active pill is a background + shadow change, not colour alone.

Usage: <div class="lb-segmented" data-lb-segmented> with <button class="lb-segmented__item" aria-checked="true|false">. For multi-toggle (multiple can be pressed, e.g. text formatting B/I/U), add data-lb-mode="toggle" and use aria-pressed. Toggle mode sets no group role, so add role="group" yourself if the group carries an aria-label. Dispatches lb-segmented-change with { value, index, item, mode }.

Single select (radio)

Exactly one active at a time. Arrow keys roam + auto-select. Default ARIA is radiogroup with aria-checked.

Selected: week

With icons

Icon + label, or icon only. View-mode switcher pattern.

Toggle mode — multi-select

Each segment toggles independently. Text-formatting pattern: Bold / Italic / Underline. Set data-lb-mode="toggle"; active state uses aria-pressed.

Active: bold

Sizes

Full width — fills container

Useful at the top of a panel or sidebar when the segmented control needs to span a predictable container width. Add --full-width.

Disabled segments

Individual segments can be disabled — keyboard nav skips them.