Default
View
Show the codeHide the code
Default, code
<SegmentedControl defaultValue="week" label="View">
<Segment value="day">Day</Segment>
<Segment value="week">Week</Segment>
<Segment value="month">Month</Segment>
</SegmentedControl>SegmentedControl
Two to five short options side by side; the choice applies straight away (Day, Week, Month).
- Free core, MIT
- Version 2.0.0-rc.1
- APG pattern: Radio group (segmented)
Examples
These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.
With icons
Theme
Show the codeHide the code
With icons, code
<SegmentedControl label="Theme" defaultValue="system">
<Segment value="light" icon={Sun}>Light</Segment>
<Segment value="dark" icon={Moon}>Dark</Segment>
<Segment value="system" icon={Monitor}>System</Segment>
</SegmentedControl>Icon only
Layout
Show the codeHide the code
Icon only, code
<SegmentedControl label="Layout" hideLabel defaultValue="list">
<Segment value="list" icon={Menu} hideLabel>List</Segment>
<Segment value="gallery" icon={Image} hideLabel>Gallery</Segment>
<Segment value="calendar" icon={Calendar} hideLabel>Calendar</Segment>
</SegmentedControl>Full width
View
Show the codeHide the code
Full width, code
<SegmentedControl defaultValue="day" fullWidth label="View">
<Segment value="day">Day</Segment>
<Segment value="week">Week</Segment>
<Segment value="month">Month</Segment>
</SegmentedControl>Disabled
View
Show the codeHide the code
Disabled, code
<SegmentedControl defaultValue="week" isDisabled label="View">
<Segment value="day">Day</Segment>
<Segment value="week">Week</Segment>
<Segment value="month">Month</Segment>
</SegmentedControl>Tokens
The 16 design tokens SegmentedControl reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 16 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.action.primary | … | --sd-color-action-primary |
| color.bg.canvas | … | --sd-color-bg-canvas |
| color.bg.muted | … | --sd-color-bg-muted |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.border.control | … | --sd-color-border-control |
| color.text.default | … | --sd-color-text-default |
| color.text.disabled | … | --sd-color-text-disabled |
| elevation.1 | … | --sd-elevation-1 |
| motion.duration.fast | … | --sd-motion-duration-fast |
| motion.easing.standard | … | --sd-motion-easing-standard |
| radius.full | … | --sd-radius-full |
| shape.radius-control | … | --sd-shape-radius-control |
| spacing.gap.xs | … | --sd-spacing-gap-xs |
| spacing.inset.md | … | --sd-spacing-inset-md |
| spacing.stack.xs | … | --sd-spacing-stack-xs |
| target.min | … | --sd-target-min |
Install
The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).
Install
npm i @superduperui/react @superduperui/tokensImport
import { SegmentedControl, Segment } from "@superduperui/react"Props
SegmentedControl also takes the props of the React Aria component it’s built on.
| Prop | Type | What it does |
|---|---|---|
labelrequired | string | Names the control. Shown above it unless hideLabel. |
hideLabel | boolean | |
childrenrequired | ReactNode | Segment elements (2 to 5). |
fullWidth | boolean | Stretch the segments to fill the width. |
When to use it
Use it for
- Switching a view or a filter in place
- Theme or unit pickers
Use something else for
- Switching panels of different content: use Tabs
- Choices that need explaining: use RadioGroup with RadioCard
- More than 5 options: use Select
Accessibility
Screen readers announce "View, radio group" then "Week, radio button, checked, 2 of 3".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Keep labels to one or two words
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 120 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 185 text runs: 0 below 7:1, lowest 12.31:1 |
| Target size | 54 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab enters on the selected segment |
| ArrowRight | Right selects the next segment |
| ArrowRight | Right wraps to the first |
| ArrowLeft | Left moves back |
In Figma
The Figma component is SegmentedControl, with Label visibility (Visible, Hidden); Width (Fit, Full); State (Default, Disabled). The Figma library isn’t published yet.
Figma to code: Label visibility → hideLabel (Visible = false, Hidden = true); Width → fullWidth (Fit = false, Full = true); State (Default, Disabled = isDisabled); Segments → children; nested Label → label.