Segmented control

Switch a view

<div class="dsgn-cluster">
  <div class="dsgn-segmented" role="radiogroup" aria-label="View">
    <label class="dsgn-segment"><input type="radio" name="dx-view" checked><span class="dsgn-icon" aria-hidden="true">list</span>List</label>
    <label class="dsgn-segment"><input type="radio" name="dx-view"><span class="dsgn-icon" aria-hidden="true">view_kanban</span>Board</label>
  </div>
  <div class="dsgn-segmented" role="radiogroup" aria-label="Period">
    <label class="dsgn-segment"><input type="radio" name="dx-per" checked>Month</label>
    <label class="dsgn-segment"><input type="radio" name="dx-per">Quarter</label>
    <label class="dsgn-segment"><input type="radio" name="dx-per">Year</label>
  </div>
</div>

Usage

One choice out of 2–5 short options that switch a view or mode right away. Radios give arrow-key navigation and form submission for free. Total height = control height: the track adds space-2 around, each segment has pad-y − space-2. Track = control-track (+ control-track-border, visible in dark). Selected = control-selected fill (+ soft shadow with Elevation = Soft), text colour instead of muted and a filled icon; no outline. data-width="full" stretches the segments to fill the row. When the options do not fit, the track scrolls sideways (like Tabs); prefer icon-only segments or a Select on narrow screens.

Details

Classes

.dsgn-segmented .dsgn-segment .dsgn-icon

Tokens used

--dsgn-border-width --dsgn-control-font-size --dsgn-control-gap --dsgn-control-line-height --dsgn-control-pad-x --dsgn-control-pad-y --dsgn-control-selected --dsgn-control-track --dsgn-control-track-border --dsgn-duration-fast --dsgn-ease --dsgn-focus --dsgn-focus-width --dsgn-font-sans --dsgn-font-weight-medium --dsgn-neutral-subtle --dsgn-radius-m --dsgn-shadow-control --dsgn-space-2 --dsgn-text --dsgn-text-disabled --dsgn-text-muted

In Figma

Segmented control · Segment

Import alone

dsgn.systems/components/segmented.css