Segmented control
tier 2 — classes.segmented changes a setting in place — a range, a layout, a unit
— from a few short options. If there is a panel of content below it, it is
tabs; if the options are many or long, it is a
select.
Segmented control
Radios under the hood, so arrow keys move between the options and the chosen one is
announced as chosen, with no ARIA at all. Give every input the same name, and
give the group a name with a <fieldset> or
aria-labelledby, or a screen reader announces three loose radios. Reach for it
instead of a <select> when the options are few and short.
<div style="display:flex; flex-direction:column; gap:16px; align-items:flex-start">
<fieldset class="form-section" style="margin:0">
<legend>Time range</legend>
<div class="segmented">
<label class="segmented-option"><input type="radio" name="range" /> 24h</label>
<label class="segmented-option"><input type="radio" name="range" checked /> 7d</label>
<label class="segmented-option"><input type="radio" name="range" /> 30d</label>
</div>
</fieldset>
<div class="segmented">
<label class="segmented-option"><input type="radio" name="view" checked /><span><i class="ri-list-check"></i> List</span></label>
<label class="segmented-option"><input type="radio" name="view" /><span><i class="ri-layout-grid-line"></i> Grid</span></label>
<label class="segmented-option"><input type="radio" name="view" disabled /><span><i class="ri-calendar-line"></i> Calendar</span></label>
</div>
</div>Three sizes
.segmented--sm and .segmented--lg take the same
--control-height tiers as .btn-sm and
.form-input-sm, so a segmented control in a bar is the same
height as the field and the button beside it; the bare class is the middle step. The tier
goes on the track, not on the options.
<div class="sedna-col sedna-gap-2">
<div class="sedna-row-wrap">
<div class="segmented segmented--sm" role="group" aria-label="Small time range">
<label class="segmented-option"><input type="radio" name="sz-sm" checked /> 24h</label>
<label class="segmented-option"><input type="radio" name="sz-sm" /> 7d</label>
</div>
<button class="btn btn-sm" type="button"><i class="ri-refresh-line"></i> Refresh</button>
<input class="form-input form-input-sm toolbar-input" type="search" placeholder="Search orders…" />
</div>
<div class="sedna-row-wrap">
<div class="segmented" role="group" aria-label="Time range">
<label class="segmented-option"><input type="radio" name="sz-md" checked /> 24h</label>
<label class="segmented-option"><input type="radio" name="sz-md" /> 7d</label>
</div>
<button class="btn" type="button"><i class="ri-refresh-line"></i> Refresh</button>
<input class="form-input toolbar-input" type="search" placeholder="Search orders…" />
</div>
<div class="sedna-row-wrap">
<div class="segmented segmented--lg" role="group" aria-label="Large time range">
<label class="segmented-option"><input type="radio" name="sz-lg" checked /> 24h</label>
<label class="segmented-option"><input type="radio" name="sz-lg" /> 7d</label>
</div>
<button class="btn btn-lg" type="button"><i class="ri-refresh-line"></i> Refresh</button>
<input class="form-input form-input-lg toolbar-input" type="search" placeholder="Search orders…" />
</div>
</div>In a toolbar
Two of them in one bar: a range inside .toolbar-filters, because it narrows
what is listed, and a layout switch at the far end, because it changes how the same list is
drawn. It still needs a group name — aria-label on the
.segmented is enough here, where a <fieldset> would add a
border and a legend the bar has no room for.
<div class="toolbar">
<div class="toolbar-filters">
<input class="form-input toolbar-input" type="search" placeholder="Search orders…" />
<div class="segmented" role="group" aria-label="Time range">
<label class="segmented-option"><input type="radio" name="tb-range" /> 24h</label>
<label class="segmented-option"><input type="radio" name="tb-range" checked /> 7d</label>
<label class="segmented-option"><input type="radio" name="tb-range" /> 30d</label>
</div>
</div>
<div class="segmented" role="group" aria-label="Layout">
<label class="segmented-option">
<input type="radio" name="tb-view" checked /><span><i class="ri-list-check"></i> List</span>
</label>
<label class="segmented-option">
<input type="radio" name="tb-view" /><span><i class="ri-layout-grid-line"></i> Grid</span>
</label>
</div>
</div>