Segmented Control
A small row of two to five options where exactly one is selected, shown by a thumb that slides to it. For switching a view or a mode in place.
Preview
Showing tasks as a list
When to use
- For a short set of mutually exclusive choices that change what is on screen right away: List, Board, Timeline.
- In toolbars and card headers, where a dropdown would hide the options and radios would take too much room.
Reach for something else
- For more than five options or long labels: use a dropdown or a Radio Group.
- For choosing between sections of a page with their own content: that is a Tab Menu Horizontal.
Anatomy
- 1
Track
A soft grey pill that holds every option.
- 2
Thumb
A white surface with a hairline ring, behind the selected option. It slides between options.
- 3
Option
A label, optionally with a leading icon. Every option shares the width equally.
States
Default
One option selected, the thumb behind it.
Hover
Unselected labels darken.
Focus
A ring around the focused option.
Disabled
The whole control or a single option, muted and inert.
Sizes
Small, medium and large change the height and label size together.
Accessibility
- The control is role="radiogroup" with an aria-label; each option is role="radio" with aria-checked.
- Only the selected option is in the tab order. Arrow keys move the selection and wrap at the ends.
- The thumb is decorative; the selection is announced from aria-checked.
Source
The Segmented Control is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block