Skip to main content

Segmented control

A segmented control is used to switch between related views of information within the same context.

Examples​

Two segments​

Open in: Storybook | Figma

Three segments​

Open in: Storybook | Figma

Four segments​

Open in: Storybook | Figma

Usage​

A segmented control consists of a horizontal set of 2-4 segments, each of which functions as a button. One option is always selected. The component does not scroll horizontally.

When to use Segmented control​

  • To represent the same kind of content, such as a list-view with different filters applied.
  • To provide closely related choices that affect an object, state, or view. For example, a segmented control can help people select options, switch between views, or sort elements.

When to consider something else​

  • If you need to group content that is dissimilar.
  • If you need to enable actions — such as adding, removing, or editing content.
  • If it needs to be accompanied by any other controls or a title if used in the top navigation bar.

Placement​

  • It appears in either the top navigation bar or below that navigation bar, near the top of the screen.
  • It should not be used in the bottom toolbar because toolbar items act on the current screen — they don’t let people switch contexts.

Instances of this component in production​

  • Claims uses an Active/Closed segmented control to filter claims by status.
  • Appointments uses an Upcoming/Past segmented control to filter appointments by type.
  • Claims also uses a segmented control to show the Status/Details of claims. This is not an appropriate use of this component since it groups content that is dissimilar. In this case, a different component should be considered.

Code usage​

Open Storybook

Content considerations​

  • Keep labels to 1 word: If you need 2 (or more) words, you're likely trying to include extraneous words or group together items that are not similar enough. You may need to consider using a different component. The label text must be short enough that it doesn't wrap in the component.
  • Consider if labels are used elsewhere on the screen: You can help differentiate different sections beneath the segmented control by not reusing the same labels.

Accessibility considerations​

  • Reference Segmented Control / Tab - Native app accessibility checklist - MagentaA11y
  • Font scaling: This component will ignore a user's settings for font scaling so the text always remains the same size. This is consistent with Apple's segmented control component.
  • Name: Purpose is clear and matches visible label
  • Role: Identifies as a button in iOS and "double tap to activate" in Android
  • Group: Visible label (if any) is grouped or associated with the button in a single swipe
  • State: Expresses its state (selected/disabled/dimmed)