Segmented control

A segmented control allows users to choose one out of a range of available options. It’s commonly used as an alternative to dropdowns and radio selections.

Usage

A segmented control is generally easier to use than the patterns that allow similar interactions but it comes with its own limitations. Because it takes up more space, a segmented control should only be used for up to 5 options but is ideal when there are 2 or 3. A segmented control should be used instead of a dropdown when there are only a few options and enough room to fit within the UI. It requires fewer interactions and is easier to use on mobile devices, thus having a smaller effect on the user’s cognitive load.

A segmented control is not a group of individual buttons that can be interacted with independently from each other. A segmented control is a group of equal options where only one can be selected and active. There’s no case where none of the options is active.

Labels

Label positioning rules are the same as they are for forms. They can be placed to the left of segmented control when there’s a lack of vertical space. But by default, the label comes above the segmented control.

The label can be omitted in cases when it’s clear what the segmented control is referring to from the UI (for example, switching between a day, week or month view in a calendar UI).

Todo: Add live component block with code example (whitespace exmple)

Input labels need to be as short as possible and should ideally be only one word. Sometimes, that can be done by removing the repeating word and using it as a label (above the segmented control). For example, instead of having input labels “Show whitespace” and “Hide whitespace” use “Whitespace” as a label and only “Show” and “Hide” as input labels.

Sizing

The options must be equal in width and prominence. If there are 3 options, each of them should take 33% of the total width of segmented control.

Design specification

Color, spacing, dimension, and layout specific information pertaining to this component can be viewed using the following link:

Sketch Measure Preview for the Segmented control

Related patterns