Segmented

OverviewCopy Anchor Link

A segmented control answers one question: which of these mutually exclusive options is active right now? Every option sits in a shared track; selecting one slides a filled indicator beneath it and flips its label to the active colour. There is always exactly one selection — the control has no empty state.

It looks like a button group, but the two solve different problems:

• A segmented control is a single-select switch — a styled track with a sliding indicator. The selection is the point.
• A button group is a cluster of connected buttons — it can be single-select, but it's just as happy holding independent commands (paginate, zoom, undo). No track, no sliding indicator.

When to useCopy Anchor Link

• To switch a view or layout (List / Board / Calendar)
• To pick one mode or scope (All / Mine / Shared, Monthly / Yearly)
• To filter a list by one mutually exclusive facet (Active / Archived)

When not to useCopy Anchor Link

• For independent commands or steppers — use a button group.
• For more than ~5 options, or long labels that won't fit on one line — use a select or tabs.
• To navigate between pages or sub-sections of content — use tabs or a secondary nav.
• For multi-select (more than one option on at once) — use checkboxes or toggle chips.

AnatomyCopy Anchor Link

A segmented control is a positioned flex track holding an absolutely-positioned indicator and a row of transparent buttons. The buttons sit above the indicator (z-index:1); the indicator slides under the active one with a 0.2s ease-out transition on top / left / width / height.

What drives each partCopy Anchor Link

Selection & the indicatorCopy Anchor Link

The selected item carries aria-pressed="true" (or .is-selected), which flips its label to --nm-segmented-item-active-fg. The visible "pill" behind it is the separate .nm-segmented__indicator element — and its position is set in JavaScript, not CSS. On selection (and on mount/resize), measure the active button and write the indicator's top / left / width / height; the 0.2s transition animates the slide for you.

Click between options to watch the indicator slide. Exactly one item is selected at all times.

• Keep one option selected at all times — a segmented control never sits empty.
• Reposition the indicator on selection and on resize, font load, or container width change, or it will drift out of alignment.
• Order options by how the user reasons about them (chronological, small→large), not alphabetically.
• Two to five options. Beyond that, labels crowd and the slide stops feeling crisp.

SizesCopy Anchor Link

Five sizes, set with nm-segmented--{size} on the track. Each pairs a nm-button--{size} item with matching track radius, padding, and indicator radius. Total control height is the item height plus the track padding on both sides.

Choosing a sizeCopy Anchor Link

• xs / sm — toolbars, table headers, dense filter bars
• md — default for panels, cards, page-level view switchers
• lg / xl — settings pages, marketing surfaces, touch-first kiosks

Icon variantsCopy Anchor Link

Items take the same icon options as buttons: label-only, leading icon + label, or icon-only. Keep the treatment consistent across the whole control — don't mix an icon-only segment with labelled ones.

Icon + labelCopy Anchor Link

Icon onlyCopy Anchor Link

Reserve for universally understood glyphs. Every segment still needs a label for assistive tech — pass it via aria-label.

Icon-only segments · md · each labelled for screen readers.

StatesCopy Anchor Link

The track and items respond to interaction without ever changing the selection model.

md · the middle segment is selected; hover and focus any other to see the resting states.

Selected vs. hoverCopy Anchor Link

• Selected is persistent: the indicator sits under the active item and its label uses the active colour. It survives focus moving away.
• Hover on an unselected item is a soft affordance only — it does not move the indicator. The indicator moves on click, then animates into place.

FocusCopy Anchor Link

Each item is a real <button>, so it shows the standard :focus-visible ring. Because items sit above the indicator (z-index:1), the ring is never clipped. Never suppress it.

No disabled stateCopy Anchor Link

Like buttons, segmented controls don't ship a disabled appearance. If an option isn't currently valid, keep the control live and surface the reason inline rather than greying out a segment — a dead segment leaves users guessing.

Light & dark themeCopy Anchor Link

The --nm-segmented-* tokens remap under data-theme. In light theme the indicator is near-black with light text; in dark theme it inverts to a light pill with dark text. Track, indicator, and label colours all flip automatically.

Both previews are locked to their theme — toggle the page theme to see the rest of the docs cascade.

Segmented in contextCopy Anchor Link

Where a segmented control fits naturally. These are layout recommendations, not rigid rules.

List header — view switcherCopy Anchor Link

A quiet segmented switch for the view, a single loud accent button for the primary action.

Filter scopeCopy Anchor Link

Pricing toggleCopy Anchor Link

Do & don'tCopy Anchor Link

The rules that keep a segmented control crisp and unambiguous.

AccessibilityCopy Anchor Link

A segmented control is a single-select widget. Get the role and the selected-state attribute right and the rest follows from the native buttons.

Choosing a roleCopy Anchor Link

• Toggle-button pattern (used here): role="group" with an aria-label on the track, and aria-pressed="true|false" on each <button>. Simple and robust.
• Radio pattern (stricter): role="radiogroup" on the track, role="radio" + aria-checked on each item, with arrow-key roving focus so the control is a single Tab stop. Prefer this when the segmented control behaves exactly like a radio group.

Pick one and apply it consistently — don't mix aria-pressed with role="radio".

KeyboardCopy Anchor Link

• In the toggle pattern, Tab moves between segments and Space / Enter selects the focused one.
• In the radio pattern, Tab enters the group once; arrow keys move and select within it, per the WAI-ARIA radio pattern.

LabelingCopy Anchor Link

• Give the track an aria-label (or aria-labelledby) naming what it controls ("View", "Billing period").
• Icon-only segments each need their own aria-label describing the option, not the glyph.
• Reflect the choice with aria-pressed / aria-checked — never rely on the indicator's colour alone. The indicator is aria-hidden.

Contrast & motionCopy Anchor Link

• Selected and unselected labels meet WCAG 2.2 AA against their backgrounds in both themes.
• The 0.2s indicator slide is a short, non-essential transition; respect prefers-reduced-motion by disabling it for users who ask.

PlaygroundCopy Anchor Link

Click a segment to slide the indicator. The markup updates live — copy it straight into your product (and wire up the indicator positioning in JS).

Token referenceCopy Anchor Link

The track and indicator own a dedicated set of --nm-segmented-* custom properties; geometry comes from the size modifier classes.

Colour tokensCopy Anchor Link

Per-size geometryCopy Anchor Link

Values are baked into .nm-segmented--{size} and the child .nm-button--{size} — use a different size class rather than overriding them.

ImplementationCopy Anchor Link

Wrap a row of transparent nm-button items in .nm-segmented, add a single .nm-segmented__indicator element, and mark the active item with aria-pressed="true". The CSS handles colours and the slide transition; you position the indicator in JavaScript by measuring the active button.

<link rel="stylesheet" href="namirial-theme.css">

<div class="nm-segmented nm-segmented--md" role="group" aria-label="View">
  <span class="nm-segmented__indicator"></span>
  <button class="nm-button nm-button--secondary nm-button--md" aria-pressed="true">List</button>
  <button class="nm-button nm-button--secondary nm-button--md" aria-pressed="false">Board</button>
  <button class="nm-button nm-button--secondary nm-button--md" aria-pressed="false">Calendar</button>
</div>

// Position the indicator under the active segment, then on every change.
function moveIndicator(root) {
  const active = root.querySelector('[aria-pressed="true"]');
  const bar = root.querySelector('.nm-segmented__indicator');
  if (!active || !bar) return;
  bar.style.left   = active.offsetLeft + 'px';
  bar.style.top    = active.offsetTop + 'px';
  bar.style.width  = active.offsetWidth + 'px';
  bar.style.height = active.offsetHeight + 'px';
}

document.querySelectorAll('.nm-segmented').forEach(root => {
  moveIndicator(root);
  root.addEventListener('click', e => {
    const btn = e.target.closest('.nm-button');
    if (!btn) return;
    root.querySelectorAll('.nm-button').forEach(b => b.setAttribute('aria-pressed', b === btn));
    moveIndicator(root);
  });
  window.addEventListener('resize', () => moveIndicator(root));
});

CSS classesCopy Anchor Link