Components / Base / Segmented control
B4 · Base
Segmented control
One choice out of a short set, drawn as a joined row of pills.
<div class="c-seg" role="radiogroup" aria-label="Range">
<button type="button" role="radio" aria-checked="true">Day</button>
<button type="button" role="radio" aria-checked="false">Week</button>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- There are two to five peer options.
- The choice takes effect immediately.
When not to use
- Each option opens a different panel with its own heading. Use tabs.
- The options do not exclude each other.
Usage
<div class="c-seg" role="radiogroup" aria-label="Range">
<button type="button" role="radio" aria-checked="true">Day</button>
<button type="button" role="radio" aria-checked="false">Week</button>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| role | radiogroup / radio | — | The row and each option. |
| aria-checked | true or false | false | The selected option. |
Keyboard
| Key | Action |
|---|---|
| ArrowLeft / ArrowRight | Moves the selection. |
| Tab | Enters and leaves the group. |
Accessibility
- The group has an accessible name.
- The checked option is exposed with aria-checked.
- A live line repeats the selection in this preview.
Motion
- Selection colour changes with --spring-ui only if a transition is added. This control swaps instantly.
Pattern origin
Base control for a single immediate choice.