SegmentedControl — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add segmented-control

Or install the whole package and import it

pnpm add orn-ui
import { SegmentedControl } from 'orn-ui/segmented-control';

Depends on:core (theme + icons)

Usage

when to use — A few options, all visible at once, one always selected — a view or range switch. For a longer or optional list, Select.
options / value / onChange — Controlled and generic, same pattern as Select — the value keeps its type.
disabled — Per-option or for the whole control.

Demo clip not recorded yet — see MEDIA.md

Variants

Switch the range of a chart — three options

<View style={{ gap: 12 }}>
  <SegmentedControl options={RANGES} value={range} onChange={setRange} />
  <Body>Showing the last {range}.</Body>
</View>

Two options — reads like an on/off switch

<SegmentedControl
  options={[
    { value: 'left', label: 'Left' },
    { value: 'right', label: 'Right' },
  ]}
  value={side}
  onChange={setSide}
/>

One option disabled — e.g. a plan not available yet

<SegmentedControl
  options={[...RANGES.slice(0, 2), { value: 'month', label: 'Month', disabled: true }]}
  value={range}
  onChange={setRange}
/>

The whole control disabled — while its data loads

<SegmentedControl options={RANGES} value={range} onChange={setRange} disabled />

Full demo source

const variants: VariantDef[] = [
  {
    label: 'Switch the range of a chart — three options',
    content: (
      <View style={{ gap: 12 }}>
        <SegmentedControl options={RANGES} value={range} onChange={setRange} />
        <Body>Showing the last {range}.</Body>
      </View>
    ),
  },
  {
    label: 'Two options — reads like an on/off switch',
    content: (
      <SegmentedControl
        options={[
          { value: 'left', label: 'Left' },
          { value: 'right', label: 'Right' },
        ]}
        value={side}
        onChange={setSide}
      />
    ),
  },
  {
    label: 'One option disabled — e.g. a plan not available yet',
    content: (
      <SegmentedControl
        options={[...RANGES.slice(0, 2), { value: 'month', label: 'Month', disabled: true }]}
        value={range}
        onChange={setRange}
      />
    ),
  },
  {
    label: 'The whole control disabled — while its data loads',
    content: <SegmentedControl options={RANGES} value={range} onChange={setRange} disabled />,
  },
];
return <VariantList variants={variants} />;

Props

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

Name	Type	Default	Description
`options`	`SegmentedControlOption<T>[]`	—	—
`value`	`string`	—	—
`onChange`	`(value: T) => void`	—	—
`disabled?`	`boolean`	—	—
`style?`	`StyleProp<ViewStyle>`	—	—