A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at once and the selection controls a value or mode, not page navigation.
ts
| Guidance | Practices |
|---|---|
| Do | Use for switching between 2–5 mutually exclusive views or modes where all options should be visible. |
| Do | Provide a descriptive label for the control to ensure the group is accessible to screen readers. |
| Don't | Use for page-level navigation; use TabList instead. TabList is a navigation component, while SegmentedControl is an input that always has exactly one selected option. |
| Don't | Use for simple on/off states; use ToggleButton instead. ToggleButton can be toggled on or off independently, while SegmentedControl enforces a single selection from a group. |
Segmented control with an individually disabled option for unavailable choices.
Segmented control that stretches segments equally to fill the available width, useful for fixed-width containers.
Compact segmented control with hidden labels, showing only icons for space-constrained layouts.
Segmented control with icon and label pairs for a view mode switcher.