Components

Segmented Control

Single-choice horizontal segments for filters, view modes, and compact toggles on small screens.

Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.

Selected: list

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Run the registry command below to add segmented-control to your project.

watermelon add segmented-control

Import Segmented Control from your local UI registry output.

Import

import { SegmentedControl } from "@/components/ui/segmented-control";

import { SegmentedControl } from "@/components/ui/segmented-control";

Pass options with value / label, and control selection with value and onValueChange.

prop	type	default	description
options	{ value: string; label: string }[]	-	Segment definitions.
value	string	-	Selected segment value.
onValueChange	(value: string) => void	-	Called when the user selects a segment.