Segmented control
Segmented control is a group of controls that allow users to switch between views or sort content. It comprises at least two options, with a maximum of four.
Usage guidelines
When to use
- To switch between different views of the same content (e.g. to allow users to switch between a list view and gallery view.)
- To filter specific items of a feed.
- When there is only a limited number of options and enough space to fit them.
When not to use
- To group items that aren't clearly related.
- When you have content to split in more than four segments. Consider using Tabs instead.
- To let user choose an option or submit data: use radio select instead.
Writing guidelines
Length
Segmented control can include a label that must be short and displayed in a single line of text, ideally one word.
Label
The label can be a noun or an adjective that clearly communicates the effect of selecting the option.
Capitalization and case
Write segment labels in sentence case.
Specifications
Anatomy
- Control container
- Active segment: Indicates the active segment being shown. One is alway preselected.
- Inactive segment
- Segment label: Shortly describes the effect that a segment will produce its content.
Variants
There are two variants for segmented control: Icon and Text.
Variants containing two to four segments are available for both types of segmented control.
| Variant | Usage |
|---|---|
| Text | More accessible option |
| Icon | To use when space is limited and/or self-evident and specific icons exist for each of the segments. |
Size
Segmented control comes in one size. Its width depends on the number of items being displayed and the length of each label, with a maximum of four items.
Styling
Segmented control is available in both dark and light theme. The dark variant (in Zurich-white) should only be used on a white background. The light variant can be used on all light and dark-colored backgrounds, except for white.
Behavior
Positioning
Segmented control should be placed right above the area it controls.
Alignment
Segmented control should be preferably left or center-aligned, with the option of being right-aligned. Do not stretch the component to fit the width of your container.
Interaction
There are two possible states for a segment: active and inactive.
