On this page
Overview
Show code, WorkItems.tsx
Variants
Sizes
Small, medium and large, the control heights of the scale. Without a size of its own it takes its container's.
Small, in a toolbar beside a small button.
Show code, SmallToolbar.tsx
Anatomy
Track
Thumb
Segment
Icon
Label
Count
Show code, SegmentedControlAnatomy.tsx
Behaviour
States
Each option can show an icon and a count.
- One option can be disabled, which the arrow keys skip, or the whole control.
- The chosen option rises out of the track on a raised thumb.
Adapting to width
The control is as wide as its options, or fills its container and splits it evenly.
- A label too long for its share ends with an ellipsis and shows whole in a tooltip.
- In a container too narrow for its options, a control as wide as its options scrolls.
Show code, FullWidthScope.tsx
Rules
The option used most comes first, and each is named in a word or two.
Use it when
- Two to five views or filters of the same content, such as Open and Done
- How a toolbar lays out content, such as List and Board
- A choice between two scopes in a narrow container, such as a sidebar
Order
Put the most used option first, and start on it.
Labels
Name each option with a word or two for its view.
- Name the whole control after what it switches, for assistive technology.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves into the control, to the chosen option, and out. |
| Arrow keys | Choose the next or previous option, skipping disabled ones. |
| Esc on a cut label | Closes its tooltip. |