Action button Alert Avatar Bottom sheet Button Card Carousel Cards Checkbox Chip Circular button Compact date input Copy Block Critical banner Date input Date picker Divider Dropdown Image Ratios Instruction Media Button Modal Money input Navigation option Nudge Password input Popover Progress Bar Progress Spinners Promo card Radio Screen loader Search input Section header Segmented control When to useBest practicePlacementInteractionAccessibilityContentAvailabilitySelect Snackbar Summary Switch Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components Action buttonAlertAvatarBottom sheetButtonCardCarousel CardsCheckboxChipCircular buttonCompact date inputCopy BlockCritical bannerDate inputDate pickerDividerDropdownImage RatiosInstructionMedia Button ModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTabsText areaText inputUploadUpload inputPatterns Resources
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

Used in forms and changing page view.

Transaction details with segmented control

Used in updates and details for page alternating page views

Best practice
Account details with in line segmented control

Use segmented control between options when filling out a form.

Transfer approval with

Use segmented control for sequential content options (eg: 1, 2, 3).

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

Horizontally centred and aligned with content container within grid

Add team member with full width segmented control

Scaled at 100% width

Team page with left aligned segmented control

Left aligned and used in place of tabs

Interaction

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
Accessibility

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

Large titles or accessibly scaled text can run over 2 lines

Segmented control with text truncation

Truncation

Content

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

1-3 words

Segmented control with too many words

4 words and punctuation

Segmented control with alike titles

Consistent alike titles

Segmented control with varied titles

Inconsistent titles

Segmented control with same hierarchy

Titles on the same level hierarchy

Segmented control with different hierarachy

Titles on varied levels of hierarchy

Availability

Platform

Available

Developer documentation

Android

iOS

Web