Component

Segmented control

A row of mutually exclusive text options with a glowing dot that magnet-slides beneath whichever one is active.

Standalone

segmented control.tsx

<NativeSegmentedControl
  options={[
    { label: "Day", value: "day" },
    { label: "Week", value: "week" },
    { label: "Month", value: "month" },
  ]}
  value={value}
  onValueChange={setValue}
/>

Example

Switches the time range above a chart or metrics view, redrawing the instant a new segment is selected.

segmented-control-example.tsx

<NativeSegmentedControl options={rangeOptions} value={range} onValueChange={setRange} />
<BalanceChart range={range} />

Capabilities

Prop	Type	Description
optionsrequired	NativeSegmentedControlOption[]	-
valuerequired	string	-
onValueChangerequired	(value: string) => void	-
surface	NativeSegmentedControlSurface	-
className	string	-
scrollY	MotionValue<number>	Optional scroll position. When provided, the control compresses as the user scrolls up.