Segmented Control
A native single-select control for choosing between a small set of options.
Segmented Control wraps Expo UI's SwiftUI segmented Picker on iOS and Jetpack Compose SegmentedButton on Android.
Installation
npx shadcn@latest add @tetra-ui/segmented-controlUsage
Compose segments from SegmentedControl, SegmentedControlItem, and SegmentedControlItemLabel.
import {
SegmentedControl,
SegmentedControlItem,
SegmentedControlItemLabel,
} from "@/components/ui/segmented-control";const [value, setValue] = useState("day");
<SegmentedControl value={value} onValueChange={setValue}>
<SegmentedControlItem value="day">
<SegmentedControlItemLabel>Day</SegmentedControlItemLabel>
</SegmentedControlItem>
<SegmentedControlItem value="week">
<SegmentedControlItemLabel>Week</SegmentedControlItemLabel>
</SegmentedControlItem>
<SegmentedControlItem value="month">
<SegmentedControlItemLabel>Month</SegmentedControlItemLabel>
</SegmentedControlItem>
</SegmentedControl>Controlled
Pass value and onValueChange for controlled state:
const [value, setValue] = useState("day");
<SegmentedControl value={value} onValueChange={setValue}>
<SegmentedControlItem value="day">
<SegmentedControlItemLabel>Day</SegmentedControlItemLabel>
</SegmentedControlItem>
<SegmentedControlItem value="week">
<SegmentedControlItemLabel>Week</SegmentedControlItemLabel>
</SegmentedControlItem>
<SegmentedControlItem value="month">
<SegmentedControlItemLabel>Month</SegmentedControlItemLabel>
</SegmentedControlItem>
</SegmentedControl>Uncontrolled
Use defaultValue when you do not need to control the selection:
<SegmentedControl defaultValue="week" onValueChange={setValue}>
<SegmentedControlItem value="day">
<SegmentedControlItemLabel>Day</SegmentedControlItemLabel>
</SegmentedControlItem>
<SegmentedControlItem value="week">
<SegmentedControlItemLabel>Week</SegmentedControlItemLabel>
</SegmentedControlItem>
<SegmentedControlItem value="month">
<SegmentedControlItemLabel>Month</SegmentedControlItemLabel>
</SegmentedControlItem>
</SegmentedControl>Disabled
<SegmentedControl disabled value="day" onValueChange={() => {}}>
<SegmentedControlItem value="day">
<SegmentedControlItemLabel>Day</SegmentedControlItemLabel>
</SegmentedControlItem>
<SegmentedControlItem value="week">
<SegmentedControlItemLabel>Week</SegmentedControlItemLabel>
</SegmentedControlItem>
<SegmentedControlItem value="month">
<SegmentedControlItemLabel>Month</SegmentedControlItemLabel>
</SegmentedControlItem>
</SegmentedControl>API Reference
SegmentedControl
Built on Expo UI platform primitives. Theme tint uses --color-primary (iOS tint, Android active segment colors).
Prop
Type
SegmentedControlItem
Requires a SegmentedControlItemLabel child for the segment text.
Prop
Type
SegmentedControlItemLabel
Prop
Type