Segmented control

A horizontal pill selector for switching between 2–5 mutually exclusive options. The ink-background container holds a paper pill that slides to the active segment with a spring animation. Used for split mode (Equal / Unequal / % / Shares), view toggles, and time range pickers.

Variants

Sizes

States

On dark surfaces

Animation

Anatomy

Usage

Accessibility

Code

HTML

<div class="seg" role="tablist" aria-label="Split mode">
  <!-- Track pill — position updated by JS -->
  <div class="seg__track" aria-hidden="true"></div>
  <button class="seg__btn" role="tab" aria-selected="true">Equal</button>
  <button class="seg__btn" role="tab" aria-selected="false">Unequal</button>
  <button class="seg__btn" role="tab" aria-selected="false">%</button>
  <button class="seg__btn" role="tab" aria-selected="false">Shares</button>
</div>

JS — slide track on selection

function initSeg(seg) {
  const track = seg.querySelector('.seg__track');
  const btns  = seg.querySelectorAll('.seg__btn');

  function move(btn) {
    btns.forEach(b => b.setAttribute('aria-selected', 'false'));
    btn.setAttribute('aria-selected', 'true');
    track.style.width     = btn.offsetWidth + 'px';
    track.style.transform = 'translateX(' + (btn.offsetLeft - 3) + 'px)';
  }

  btns.forEach(btn => btn.addEventListener('click', () => move(btn)));

  // Arrow key navigation
  seg.addEventListener('keydown', e => {
    const idx  = [...btns].indexOf(document.activeElement);
    if (e.key === 'ArrowRight' && idx < btns.length - 1) { move(btns[idx + 1]); btns[idx + 1].focus(); }
    if (e.key === 'ArrowLeft'  && idx > 0)                { move(btns[idx - 1]); btns[idx - 1].focus(); }
  });

  // Init position on load
  const active = seg.querySelector('.seg__btn[aria-selected="true"]');
  if (active) move(active);
}

document.querySelectorAll('.seg').forEach(initSeg);

CSS classes

Design tokens used