Segmented control
A segmented control is a group of 2 – 5 buttons that lets the user switch views or sort elements.
Overview
The segmented control switches between views or to sort elements. The segmented control is good to use to provide the user with closely related choices that affect an object, state or view.
Variants
The segmented control comes in two sizes:
- Default: The most commonly used to ensure visibility.
- Small: Used in confined spaces.
Behaviour
Component acts as button and trigger a change on click. One option need to be pre-selected, most likely the first. Only one segment can be active simultaneously.
Features
Icons
The options may have an icon to accentuate the choices. Use icons sparsely but consistently.
Overflow
When there isn't enough room for all items to be displayed the items will need to scroll. This is indicated by arrows indicating that there are more options available.
Do's and Don'ts
Do
- Use max 5 options, try to have as few as possible.
- Keep option size consistent
Don'ts
- Use it to collect data in a form, in that case use radio button or select.
- Use to navigate in different areas, use tabs for that.
- Mix items with and without icon
- Use it for actions, use buttons instead.