Component

Segmented control

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

The primitive

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 balance chart, redrawing the chart 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 MotionValue<number> from useScrollCollapse's scrollY. When provided the control compresses as the user scrolls up.