Segmented Control

The .c-segmented is a pill-shaped inline switcher. Active segment gets accent styling via :has(:checked). Built on native radio inputs - keyboard accessible, no JavaScript.

Semantic HTML

<div class="c-segmented" role="radiogroup" aria-label="View mode">
  <label class="c-segmented__item">
    <input type="radio" name="view" checked />
    <span>List</span>
  </label>
  <label class="c-segmented__item">
    <input type="radio" name="view" />
    <span>Grid</span>
  </label>
</div>

Class contract