[component]

Dev Mode
Segmented control
Description
SegmentedControl may be used to group multiple selections. The controls display the current state and related state. Create layout to convey a clear sense of information hierarchy. When a control is engaged, information below the control should also be updated. Also known as ‘Toggle group’.
One
Two
Three
Usage Guidelines
Do
Use segmented control to separate groups of information into 'screens'.
For mobile controls with more than 3 named screens, use the dot variant.
Don't
Do not use more than 3 named screens on mobile.
Props
Name
Type
Required
Description
items
Required
onChange
Required
badges
maxItems
number
selectedIndex
number
size
testID
string
Root test id for the primary interactive element or container.
testIDs
SegmentedControlTestIDs
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Tab Bar, Switcher, Toggle Group
Examples
Default
One
Two
Three
Large
One
Two
Three
Overflow
One
Two
Three Four Five Six Seven
WithBadges
Inbox
10
Sent
5
Drafts
2
ScrollingWithBadges
Inbox
10
Sent
5
Drafts
2