Segment Control Item
Icon
Label
Default
Medium
Small
Icon and Label
Label Only
Icon Only
Default
Hover
Active
The segment control supports 2-4 choices. If more choices are needed, consider using a Radio Group
Only one choice can be selected at a time. If a multiple-choice selection is needed, consider using a Checkbox Group.
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".
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. ¹
Do
Don't
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.
Do
Don't
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. When only using icons, the tooltip property should be enables to show the button label.
Warning
The segment control labels should be short and easy to understand. Try to limit labels to one word. Longer labels will make choices harder to quickly scan and understand.²
Do
Don't
The options in the segment control should be related to a single category or task. The labels should be clearly distinct from one another so that the differences between the options are clear to the user.
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
