Segments

A segmented control component for switching between different views. Uses native SegmentedControl on iOS and Radix UI Tabs on web.

Installation

npm
yarn
pnpm
bun
npm install @react-native-segmented-control/segmented-control @radix-ui/react-tabs
Copy

Usage

import { Segments, SegmentsContent, SegmentsList, SegmentsTrigger, } from "@/components/ui/segments";
Copy

Examples

Basic Segments

A simple segments component with two tabs.

Basic Segments
Account Section
View Code
Copy

Multiple Segments

Add more segments for additional views.

Multiple Segments
Overview dashboard with key metrics
View Code
Copy

Controlled Segments

Control the active segment externally with state.

import { useState } from "react"; function ControlledExample() { const [value, setValue] = useState("account"); return ( <Segments value={value} onValueChange={setValue}> <SegmentsList> <SegmentsTrigger value="account">Account</SegmentsTrigger> <SegmentsTrigger value="password">Password</SegmentsTrigger> </SegmentsList> <SegmentsContent value="account"> <Text>Account Section</Text> </SegmentsContent> <SegmentsContent value="password"> <Text>Password Section</Text> </SegmentsContent> </Segments> ); }
Copy

With Rich Content

Add rich content to each segment section.

Rich Content
User Profile
Manage your profile information and personal details.
View Code
Copy

API Reference

Segments

The root container component that provides context for the segments.

Prop
Type
Default
Description
defaultValue
string
-
Initial value for uncontrolled segments
value
string
-
Controlled value
onValueChange
(value: string) => void
-
Callback when value changes
children*
ReactNode
-
SegmentsList and SegmentsContent components
className
string
-
CSS classes for styling

SegmentsList

Container for the segment triggers. Renders the native SegmentedControl on iOS.

Prop
Type
Default
Description
children*
ReactNode
-
SegmentsTrigger components
style
StyleProp<ViewStyle>
-
Style prop for native platforms
className
string
-
CSS classes for styling (web only)

SegmentsTrigger

A trigger button for a segment. On native, the component is a marker that provides data to the SegmentedControl.

Prop
Type
Default
Description
value*
string
-
Unique value for this segment
children*
ReactNode
-
Label text for the trigger
className
string
-
CSS classes for styling (web only)

SegmentsContent

Container for the content of a segment. Only visible when the parent segment's value matches.

Prop
Type
Default
Description
value*
string
-
Value that activates this content
children*
ReactNode
-
Content to display
className
string
-
CSS classes for styling

Platform Differences

Native (iOS/Android)

  • Uses @react-native-segmented-control/segmented-control
  • SegmentsTrigger components are marker components (don't render anything directly)
  • SegmentsList collects trigger metadata and renders a native SegmentedControl
  • Full native appearance and behavior
  • className on triggers has no effect

Web

  • Uses Radix UI Tabs primitives
  • Full keyboard navigation support
  • Styled pill-shaped segments with smooth transitions
  • Supports focus-visible ring styles
  • Full className customization on all components

Accessibility

  • On web, segments are fully keyboard navigable with arrow keys
  • Screen readers announce segment labels
  • Focus indicators follow accessibility best practices
  • Native segments inherit platform accessibility features

Static Property Access

You can also access the subcomponents via static properties:

<Segments defaultValue="account"> <Segments.List> <Segments.Trigger value="account">Account</Segments.Trigger> <Segments.Trigger value="password">Password</Segments.Trigger> </Segments.List> <Segments.Content value="account">Account content</Segments.Content> <Segments.Content value="password">Password content</Segments.Content> </Segments>
Copy