Segmented control
Switches between 2–5 views of the same content. The selected item is raised on a neutral track.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="px-segmented" role="radiogroup" aria-label="Billing period" data-px-single="aria-checked">
<button type="button" role="radio" class="px-segmented__item" aria-checked="true">Monthly</button>
<button type="button" role="radio" class="px-segmented__item" aria-checked="false" tabindex="-1">Yearly</button>
<button type="button" role="radio" class="px-segmented__item" aria-checked="false" tabindex="-1">Lifetime</button>
</div>Usage
- Use for switching views or modes, not for navigation.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Small
<div class="px-segmented px-segmented--sm" role="radiogroup" aria-label="Size" data-px-single="aria-checked">
<button type="button" role="radio" class="px-segmented__item" aria-checked="false" tabindex="-1">S</button>
<button type="button" role="radio" class="px-segmented__item" aria-checked="true">M</button>
<button type="button" role="radio" class="px-segmented__item" aria-checked="false" tabindex="-1">L</button>
</div>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-segmented | class | Track. |
px-segmented__item | class | Option (button role="radio"). |
data-px-single="aria-checked" | attribute | Single selection + arrow keys. |
Figma properties
Segmented control4 variants · page “Toggles”Open
Switches between 2–5 views of the same content. Selected item is raised on a neutral track. RTL reverses item order.
| Property | Type | Values |
|---|---|---|
| Size | Variant | Small Medium |
| Direction | Variant | LTR RTL |
Segmented control / Item10 variants · page “Toggles”Open
One option inside a Segmented control.
| Property | Type | Values |
|---|---|---|
| Label | Text | “Label” |
| Size | Variant | Small Medium |
| State | Variant | Active Hover Focused Disabled Selected |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-segmented-padding | spacing-4 | 4px |
--px-segmented-radius | radius-12 | 12px |
--px-segmented-item-radius | radius-8 | 8px |
--px-segmented-gap | spacing-2 | 2px |
--px-segmented-item-height-md | spacing-32 | 32px |
--px-segmented-item-height-sm | spacing-28 | 28px |
--px-segmented-item-padding-x | spacing-12 | 12px |
--px-segmented-item-gap | spacing-8 | 8px |
Accessibility
- role="radiogroup" + role="radio"; arrow keys move and select.