Segmented control
Segmented control is used to pick one choice from a linear set of closely related choices, and immediately apply that selection.
Anatomy
A diagram showing the anatomy of a segmented control with labeled parts: selected button, icon, and text label.
Usage
For implicitly saved settings
The primary purpose of a segmented control is to pick a value from a list of options and immediately apply that selection. It's similar to a group of radio inputs except radio group selections need to be explicitly saved via form submission.
To toggle content visibility
The current implementations of our segmented control do not support rendering segments as links (<a> tags). Continue to avoid using segmented controls that change the URL until we have a solution for rendering segments as links.
Segmented controls may also be used to change how content in a view is rendered. The following use cases are acceptable:
- Sort control: Activating a segment affects the order of a list of items.
- Filter control: Activating a segment affects the visibility of items in a list.
- Content formatting picker: Activating a segment changes the formatting of the same content.
Sort control example:
Filter control example:
Content formatting example:
Content
Segments
A segmented control should have 2–5 choices with text labels, or up to 6 icon-only segments. Too many choices can be difficult to parse and take up too much horizontal space.
Use a segmented control for picking from 5 or fewer options.
Don't use a segmented control for more than 5 options.
Segment icons
Icons can be rendered in each segment as a visual cue to help users understand their options.
Icon-only segments
Use icons without a visible text label sparingly, and only with icons that are easily understood.
Use icons without a visible label when the icon's meaning is obvious.
Don't use obscure icons without a visible label.
Layout
Fill available width
A segmented control's width can stretch each button evenly to fill the width of the control's parent.
Responsive design
There are cases where a segmented control needs to be placed in a spot that is too narrow to accommodate all of its options.
Desktop view:
Mobile view (icon-only):
Accessibility
A segmented control is treated like a list where each list item contains a button.
Do not treat a segmented control like any of the following ARIA roles:
radiogroup- which would require a save button to apply changestablist- which is used to switch between tab panelstoolbar- which is a collection of function buttons
Keyboard navigation
- Tab: Moves focus to the first or last button when entering the control
- Enter/Space: Selects the focused button
- Arrow keys: Do not change focus or selection (unlike radio groups)
Touch targets
Ensure segmented control buttons have a large enough touch target size for touchscreen devices.