Segmented Control

A segmented control is a group of 2-4 options that lets the user switch views or sort elements.

Content

  • Ideal: 10 characters / acceptable: 15 characters per option
  • Clear, concise, transparent copy that works together: Day, Month, Week / Basic, Essentials, Plus, All-in-One
  • 1 word per section is the usual, 2 is ok but not advised, avoid 3+ (exception: “All-in-One”)
  • No text wrapping, ever

 

Placement

Always place ABOVE the content it’s filtering, never below.

SegmentedControl-Example-Placement

 

Fill vs fixed width

  • Fill: use when it makes sense to go edge to edge. This is the native app default.
  • Fixed: can be used in tight spaces, typically when it’s paired with other controls. This is the desktop default.

 

Best practices

Number of options

Use in single-select scenarios when there are 2 to 4 options for filtering. For 5 or more options, use a single select component.

Do
SegmentedControl-DoDont-Options-Do
Don’t
SegmentedControl-DoDont-Options-Dont

 

Filtering vs navigation

Use a segmented control for filtering, not for performing actions or navigation. For navigation, use tabs instead.

Do
SegmentedControl-DoDont-FiltervNav-Do
Don’t
SegmentedControl-DoDont-FiltervNav-Dont

 

Resources

(internal only)

Figma

Storybook

Enhancements

 

 

Radio button

Checkbox (group)

Checkbox (single)

Toggle switch

Segmented control

Number of options

Multiple

Multiple

2 (on/off)

2 (on/off)

2-4

Number of selections

1

0 - all

1

1

1

Default selection

Yes (usually)

No

Yes

Yes

Yes

Relationship of options

Mutually exclusive

Independent

Mutually exclusive

Mutually exclusive

Mutually exclusive

Selection occurs

After confirmation

After confirmation

After confirmation

Immediately

Immediately