Segmented control

A segmented control allows users to update views of content and select between 2-3 alike options.

Segmented control
When to use

Use segmented control:

  • To update or change views of content
  • To select between alike options

Don’t use segmented control:

  • To navigate between content
  • To filter between content
  • With dissimilar options or more than 3 options

Send money screen with segmented control
Transaction details with segmented control
Best practice
Account details with in line segmented control
Transfer approval with
  • Can be positioned at the top, middle or bottom of a screen paired with a heading or related content inside a form.
  • Center aligned
  • Never use segmented control at 100% wide on desktop

Center aligned on grid
Add team member with full width segmented control
Team page with left aligned segmented control

Clicking an alternate option within segmented control slides the active state to the selected option.

Selecting certain options inside forms may trigger alerts.

Segmented control with alert

For longer translations or scaled content, text will wrap over 2 lines if needed.

Never use truncation, this hides options and is poor for discoverability.

Segmented control with two lines of text
Segmented control with text truncation

Segmented control should be used for assisting users when viewing or updating content, as well as selecting different options within forms. So the copy should always be titled and remain similar to each option.

Options should:

  • Be at the top of the hierarchy for the section

  • Be short (1–3 words)

  • Capitalise the first letter of the first word

  • Not have any punctuation

Segmented control
Segmented control with too many words
Segmented control with alike titles
Segmented control with varied titles
Segmented control with same hierarchy
Segmented control with different hierarachy



Developer documentation




Coming Q3, 2024