Common Component Ticket: Segmented Control

Intro (title will not be published)

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

Examples

Default

Embed Figma master component
Embed Storybook

Variations

Embed Figma variations

Usage

A segmented control consists of a horizontal set of two or more 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 (use Tabs instead).
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

Active/Closed claims (see below, left image) and Upcoming/Past Appointments (both are the same data type - segmented control serves as a filter).

On the left is an image of the Segmented Control component in Claims that's a correct usage of the component. Under the image, it says the component serves as a way to filter claims by status. On the right is an image of the Segmented Control component on a Claims detail page. The Segmented Control options are Status and Details. This is not an approved use of the component. Under the image, it says this usage groups content that is dissimilar and you should use the tabs component instead.

Code usage

Add link to 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.
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
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)

department-of-veterans-affairs / va-mobile-app

Common Component Ticket: Segmented Control #4599