Segmented Controls

Segmented controls are used to switch between several mutually exclusive modes or options within an interaction.

Presentation

A segmented control has a gray #949494 border and rounded corners. The control is composed of at least three options to avoid state ambiguity.

Segmented control options always contain a text label and may contain an accompanying icon or image. All options in a control have the same width and height.

Only one option can be selected at a time. The selected option cannot be deselected; instead, another option must be selected.

Segmented control options have the following states, based on the secondary filled button style (see the Buttons page for more information).

  • Default. Option has a blue #0855B2 label and gray #949494 borders separating it from adjacent options.
  • Hover. Visible when the cursor is over the option. Option background changes to a light blue #d6ebff . The pointer cursor is shown.
  • Selected. Option background changes to blue #0855B2 , and option label changes to white #FFFFFF . Borders with adjacent options also change to blue. If an icon is present, it receives a white #FFFFFF border to ensure visibility.
  • Disabled. Visible when the option is inactive (e.g., when a modal system tool like Scratchwork is enabled). Option background becomes light gray #E5E5E5 , and option label becomes dark gray #909090 . For the selected option, the shades of gray are reversed.

Vertical Variant

When an option in a vertically aligned segmented control contains just a label, the label is center-justified. When an option contains a label and an icon, the option content is left-justified.

The following demo presents the vertical variant both center-justified with just a label and left-justified with an icon and a label.

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.

Horizontal Variant

Option content in horizontally aligned segmented controls is always center-justified.

The following demo presents the horizontal variant center-justified for both the label-only and icon-and-label use cases.

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.