Segment Control Item
Icon
Label
Default
Medium
Small
Icon and Label
Label Only
Icon Only
Default
Hover
Active
Number of Choices
The segment control supports 2-4 choices. If more choices are needed, consider using a Radio Group
Mutually Exclusive
Only one choice can be selected at a time. If a multiple-choice selection is needed, consider using a Checkbox Group.
1. When to use
The segment control should be used to allow users to change between different views of content or data. For example, switching the date range of a graph or switching between list or grid views. The segment control may also be used to change between different settings such as "and/or" and "include/exclude".
2. Related Choices
The Segment Control should be used to toggle between related settings or options that belong to a single category or task. This ensures that users can quickly and easily understand their options and make a selection without confusion. ¹
3. Concise
The segment control items should use short labels or icons. Avoid using longer labels as this will make the choices harder to quickly understand. ²
4. Segment Control vs Tabs
Segment controls should be used to change the between alternate views of the same content or data. Tabs should be used to navigate between different pages or content.
5. Icon Only
Only use the "icons only" segment control when there is high confidence in that the icons meanings will be understood. Avoid using only icons when uncommon choices.
Related Components
Related Patterns
Accessibility
Color contrast ratio for our Segment Control component meets AAA standards, based on Web Content Accessibility Guidelines (WCAG) guidelines.
Benefits: People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.
Additional Reading
Reducing ambiguity on the segmented control UI design https://uxdesign.cc/reducing-ambiguity-on-the-segmented-control-design-a5a1feef54f0
A better segmented control https://medium.com/tap-to-dismiss/a-better-segmented-control-9e662de2ef57