# SegmentedControl > Molecule — orn-ui > ⚠️ Requires : This component (like every orn-ui component) must render inside a ancestor, or it throws at runtime. See https://orn-ui-docs.vercel.app/getting-started.md > Runs on Expo SDK 54, 55, 56 and 57, and on bare React Native >=0.81 with react >=19.1. No native modules — works in Expo Go, no prebuild. ## Installation Install just this component (copies the source into your project, no npm dependency) ```bash npx orn-ui add segmented-control ``` Or install the whole package and import it ```tsx pnpm add orn-ui import { SegmentedControl } from 'orn-ui/segmented-control'; ``` Depends on: core (theme + icons) ## Variants ### Switch the range of a chart — three options ```tsx Showing the last {range}. ``` ### Two options — reads like an on/off switch ```tsx ``` ### One option disabled — e.g. a plan not available yet ```tsx ``` ### The whole control disabled — while its data loads ```tsx ``` ## Full demo source ```tsx const variants: VariantDef[] = [ { label: 'Switch the range of a chart — three options', content: ( Showing the last {range}. ), }, { label: 'Two options — reads like an on/off switch', content: ( ), }, { label: 'One option disabled — e.g. a plan not available yet', content: ( ), }, { label: 'The whole control disabled — while its data loads', content: , }, ]; return ; ``` ## Props | Name | Type | Default | Description | |---|---|---|---| | `options` | `SegmentedControlOption[]` | — | — | | `value` | `string` | — | — | | `onChange` | `(value: T) => void` | — | — | | `disabled?` | `boolean` | — | — | | `style?` | `StyleProp` | — | — |