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

• 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

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

Selecting certain options inside forms may trigger alerts.

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 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