Components / Inputs / Segmented control

Segmented control

Partial

Switches between two to four views of the same content.

Platforms Phone · TabletGroup InputsUpdated 26 Oct 2026

When to use

  • The same records shown another way: table or list, by animal or by species.
  • A period for a chart: 7 days, 30 days, 3 months.
  • Two to four options, each one or two words.

When not to use

If people need toUse
Split records by status with countsPrimary tabs
Filter a list by a valueChips
Choose a value in a formDropdown
Turn something on or offSwitch

Anatomy

OptionOption
  1. Track · required, pale green
  2. Chosen segment · required, Antz green
  3. Other segments · required

Variants

VariantPurposeFigma
Two to four optionsEqual widths across the trackTemporary rule

States

StateWhenWhat changesFigma
ChosenThe view on screenAntz green fill, white semibold textTemporary rule
Not chosenOther viewsNo fill, Ink textTemporary rule

Behaviour

  • Tapping a segment switches the view at once; there is no Apply.
  • The green fill slides to the new segment in 180 ms; a light haptic tick confirms.
  • The choice is kept when people come back to the screen.

Phone and tablet

PhoneTablet
WidthFull width of the contentUp to 480, left aligned with the content

Content

PartRule
LabelsOne or two words, sentence case; the same length where possible

Do and don't

Table viewList view
DoKeep labels short and equal.
AllPendingApprovedRejectedCancelled
Don'tUse it to split records by status. That is Primary tabs.
Primary tabsChipsSecondary tab
← Search and filterButton →