Components / Form & Input / Segmented control

Segmented control beta

A row of radios wearing one pill. Switching views or modes, cast as a single control.

Preview

<div style="display:flex;gap:14px;flex-wrap:wrap;align-items:center">
  <div class="k-seg" role="radiogroup" aria-label="Range">
    <label class="k-seg-item"><input type="radio" name="range" checked><span>Day</span></label>
    <label class="k-seg-item"><input type="radio" name="range"><span>Week</span></label>
    <label class="k-seg-item"><input type="radio" name="range"><span>Month</span></label>
  </div>
  <div class="k-seg" role="radiogroup" aria-label="Density">
    <label class="k-seg-item"><input type="radio" name="density"><span>Comfort</span></label>
    <label class="k-seg-item"><input type="radio" name="density" checked><span>Compact</span></label>
  </div>
</div>

/* KATA Segmented — radios in one pill. No JS. */
.k-seg{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--k-seg)}
.k-seg-item{position:relative}
.k-seg-item input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.k-seg-item span{display:flex;align-items:center;height:27px;padding:0 13px;border-radius:8px;font-size:12.5px;color:var(--k-ink-2);transition:background .15s,color .15s;white-space:nowrap}
.k-seg-item input:checked + span{background:var(--k-bg);color:var(--k-ink);font-weight:550;box-shadow:0 1px 2px rgba(16,24,40,.09)}
.k-seg-item input:focus-visible + span{box-shadow:var(--k-ring)}
.k-seg-item input:disabled + span{opacity:.5;cursor:not-allowed}

Usage

For 2–4 mutually exclusive modes that switch content in place (Day / Week / Month). For settings that submit with a form, Tabs or Radio group may be the honest choice.

Accessibility

Real radio inputs underneath, so arrows keys and screen readers behave. The pill is presentation only.

Rating

Select