Components
Segmented Control
One choice from a few views or options, with a white knob that slides to the picked one. Works as tabs or as a radio group, fully keyboard driven.
A segmented control picks one of a few options. A white knob slides to the picked one. As tabs
(the default) it switches a panel; as a radio group it sets an option. The arrow keys move along
and pick, and Home and End jump to the ends. The label is required and names the group for screen
readers.
Preview
Friday, Oct 23
As a radio group
Usage
<!-- include core.css + segmented-control.css -->
<div class="sgc-seg" role="tablist" aria-label="View">
<span class="sgc-k" aria-hidden="true"></span>
<button role="tab" aria-selected="true" data-v="day">Day</button>
<button role="tab" aria-selected="false" tabindex="-1" data-v="week">Week</button>
<button role="tab" aria-selected="false" tabindex="-1" data-v="month">Month</button>
</div>Properties
| Name | Type | Description |
|---|---|---|
options | { value: string; label: ReactNode }[] | The choices, in order, left to right. |
value / defaultValue | string | The picked value. Pass value with onValueChange for a controlled control. |
onValueChange | (value: string) => void | Fires with the new value when the pick changes. |
label | string | Names the group for screen readers, like View. Required. |
as | tabs | radio | tabs (the default) when it switches a panel, radio when it sets an option. |
id | string | Ties the tabs to their panel: give the panel an id of the form "id-panel" and point its aria-labelledby at "id-value". Defaults to a generated id. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The
track and sliding knob take the active theme's surface and accent colors; in Blueprint the control
is squared off, in Soft it is a pill with a rounder knob.