Segmented control

A linear set of controls functioning as a button that can define a view or state

Healthy
Show details
Healthy
Published: February 21, 2024
Updated: February 21, 2024

Overview

Segmented controls are used to display a set of two or more options, and requires that one option is always selected. Within the control, all options are equal in width and can contain text or icons.

 

Segmented control

Segmented control

Design

Structure

  • Track: outside container of the component that holds the individual options
  • Option control: an individual option that can be selected
    • Label: indicates what the option relates to
    • Icon: supporting illustration for the option

Variants

  • Text: default option that includes only a label in each option control
  • Text + Icon: a variant that includes both text and an icon for faster scalability. Not recommended in cases where there are more than 3 options.
  • Icon only: can be used when there is limited space available. Should always be paired with a delayed tooltip that provides a label for each option

Size

Depending on where the control is placed in the UI, different sizes can be selected. The size of the segmented control should match the size variant of the components around it.

For example, if it is placed to the left of a button group using the size=medium variant, the following size of selected control should be used.

Small

Small

  • Small (32px)
  • Medium (36px)
  • Large (40px)

States

Default

Default

Hover

Hover

Focused

Focused

Active

Active

Disabled

Disabled

Active, Disabled

Active, Disabled

 

Guidelines

Segmented controls can also be used to toggle varying views of related content. While similar to tabs in nature, the segmented control should keep the user within the same interface (no page rendering, etc) whereas tabs are used for navigational purposes.

 

  • Limit the number of options within the control. Typically 2-3 is the maximum. If any larger, consider a Radio group or Input select.
  • Be consistent with how options are shown. All options are either text-only, icon-only, or have both text and icon.
  • Use tooltips on hover for icon-only selected controls. Not all icons have a clear affordance to their action and should be accompanied by a delayed tooltip that appears after the user has hovered on the element for more than 300ms.

Use cases

Segmented controls are great for "multiple choice" or boolean type of inputs that default to one choice over another, while keeping all choices visible and easily discoverable:

  • am/pm
  • true/false
  • Before/After
  • Subscribe/unsubscribe
  • List/Grid view

 

  • Try to limit the number of options to 3 or less, with a maximum of 5 accepted in the control
  • Option text should be a single word, for example in the campaign and template editor, the options are: Details, Design, Preview
  • Use icon-only variant without a delayed tooltip for the options. Also be sure to include aria-labels for each of the options so that it's still accessibile to those that may rely on a screen-reader to support their work
  • Modify the styles of the selected control. This includes height, icon color, borders, border radius, or other properties. Please reach out to the design system owner if the component's current styles don't fit your needs
  • Display more than 5 options, with the preferred count to be 3 options or less

Content

  • Option text should be a single word, for example in the campaign and template editor, the options are: Details, Design, Preview
  • All options are either text-only, icon-only, or have both text and icon. Icon-only options should always include a delayed tooltip for each option.

Accessibility

  • Ensure appropriate aria-labels are applied to each option in the control
  • Test color contrast ratios for various states to ensure text contrast meets the WCAG 2.2 4.5:1 contrast ratios
  • Validate that the focus order is correct for each option in the segmented control. Use Tab and Shift+Tab to focus and navigate through the options, and pressing Return on the keyboard activates the focused option

 

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Healthy