REACT-NATIVES
WIRED FOR SPEED
react-natives v2.2.0
Theme
Light
Dark
Get Started
Menu
Components
Navigation
SegmentedControl
A horizontal set of two or more segments for switching between views.
Example
Preview
Code
Props
SegmentedControl Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes to apply to the segmented control container.
value *
string
—
The currently selected segment value.
onValueChange
(value: string) => void
—
Callback invoked when the selected segment changes.
size
'sm' | 'md' | 'lg'
'md'
Controls the size of the segmented control.
SegmentedControlItem Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for a segment item.
value *
string
—
The unique value of this segment.
Usage Guidelines
When to use
Use SegmentedControl for switching between related views or filtering content within the same context.
Best practices
•
Limit segments to 2-5 items — use Tabs for more options.
•
Keep segment labels short (1-2 words) for a clean appearance.
•
Use SegmentedControl for view switching — use ToggleGroup for multi-select actions.
Accessibility
SegmentedControl uses tablist semantics. Each segment is a tab with selected/unselected state announced to screen readers.
Related Components
Tabs
A compound tabbed interface component with tab list, individual tabs, and content panels for organizing content into switchable views.
ToggleGroup
A group of toggle buttons where one or multiple can be selected.
Radio
A compound radio button component for single-selection within a group, with indicator, icon, and label sub-components.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.