Overview
Use SegmentedControl when two to five peer choices change the current view, mode, density, or scope immediately.
Project view
Switch between equivalent representations of the same project collection.
Anatomy
The control combines a named group, equal-priority segments, optional icons, a selected treatment, and optional compact metadata.
- 1Group
Provides one accessible name for the related choices.
- 2Selected segment
Identifies the active mode and only tab stop.
- 3Icon
Reinforces a concise visible label.
- 4Metadata
Adds a short count or status only when useful.
- 5Unselected segment
Remains available at equal hierarchy.
When to use
Use for a small stable set of peer modes whose selection takes effect immediately.
Recommended
- Switch representations
Move between list, board, timeline, or chart views.
- Change display density
Choose comfortable or compact presentation.
- Select a short scope
Switch between a few comparable data ranges.
When not to use
Use another control for navigation, multi-selection, large sets, or form submission choices.
Avoid
- Do not navigate pages
Use Tabs or Navbar for destinations and content panels.
- Do not select several values
Use Checkbox or FilterBar for independent choices.
- Do not crowd many options
Use Select when choices cannot remain concise and visible.
Variants
Treatment, orientation, size, and distribution adapt the control without changing its exclusive-selection model.
Tonal
Default selected surface with subtle container.
Outlined
Defined group on neutral surfaces.
Underline
Restrained embedded mode switch.
Layout
Horizontal or vertical, intrinsic or full width.
States
One enabled segment remains selected while roving focus keeps keyboard navigation efficient.
| State | Trigger | Visual response | Interaction |
|---|---|---|---|
| Selected | Value is active | High-emphasis treatment | Single tab stop |
| Unselected | Peer value inactive | Lower emphasis | Pointer or Arrow selects |
| Focused | Keyboard navigation | Visible focus outline | Arrow changes selection |
| Hover | Pointer rests on item | Tonal surface | Click selects |
| Disabled | Choice unavailable | Reduced emphasis | Skipped by navigation |
Behavior
SegmentedControl follows radio-group selection and focus behavior while applications own the resulting view or mode.
Roving focus
Arrow keys move focus and selection among enabled segments.
Boundaries
Home and End select the first and last enabled choices.
Controlled state
Value can be application-owned or initialized internally.
Distribution
Full width gives every segment equal available space.
Accessibility
The component exposes a named radiogroup and radio items with one roving tab stop.
| Key | Action |
|---|---|
| Tab | Moves focus to the selected segment. |
| ←→ | Moves and selects in horizontal orientation. |
| ↑↓ | Moves and selects in vertical orientation. |
| HomeEnd | Selects the first or last enabled segment. |
- Give every control a concise aria-label.
- Keep visible item labels even when icons are present.
- Maintain exactly one selected value when enabled items exist.
- Skip disabled items during roving navigation.
- Do not use color alone for selected state.
- Ensure labels remain readable at 200% zoom.
Content guidelines
Segment labels should be short, parallel, and understandable outside their selected treatment.
Use parallel nouns
Name comparable representations consistently.
List, Board, Timeline
Stay concise
Prefer one or two words per segment.
Compact
Avoid instructions
Name the mode rather than the action.
Chart
Use metadata sparingly
Include only stable helpful counts.
Board 8
Examples
Vertical orientation supports narrow inspectors when the same choices cannot fit horizontally.
Vertical interval
Props / API
SegmentedControl extends div attributes; each item defines value, label, icon, badge, and disabled state.
Props