25Segmented control

One choice from two to four, where the options are a view rather than data: grid or list, week or month, all or mine. The whole set is visible at once — that is the difference from a Select.

Use it for

Switching how the same content is displayed
Two to four options with short, parallel labels

Not for

More than four — the labels get too short to read and it wants to be a Select
Multi-select filtering — that is Filter rail's choice chips
An action — a segment changes a view, it does not do a thing

Two and three up

markup

<fieldset class="ns-segmented">
  <label class="ns-segmented__option"><input type="radio" name="view" checked><span><i class="ph ph-squares-four" aria-hidden="true"></i>Grid</span></label>
  <label class="ns-segmented__option"><input type="radio" name="view"><span><i class="ph ph-rows" aria-hidden="true"></i>List</span></label>
</fieldset>
<fieldset class="ns-segmented">
  <label class="ns-segmented__option"><input type="radio" name="scope" checked><span>All</span></label>
  <label class="ns-segmented__option"><input type="radio" name="scope"><span>In progress</span></label>
  <label class="ns-segmented__option"><input type="radio" name="scope"><span>Complete</span></label>
</fieldset>

Disabled option

Disable the segment, not the whole control — the reader can still see the option exists.

Monthly Yearly Lifetime

markup

<fieldset class="ns-segmented">
  <label class="ns-segmented__option"><input type="radio" name="plan" checked><span>Monthly</span></label>
  <label class="ns-segmented__option"><input type="radio" name="plan"><span>Yearly</span></label>
  <label class="ns-segmented__option"><input type="radio" name="plan" disabled><span>Lifetime</span></label>
</fieldset>

Accessibility contract

Real radios inside a fieldset with a legend, so arrow-key navigation, form submission and grouping all come from the platform
No JS required for the control itself
The legend names what is being switched; the labels name the options