# Segmented Control

Segmented control for switching between a few options, with text segments that can carry icons. The highlight slides smoothly to your pick and can be dragged, and a glass style suits photos.

> Composed · Free · Navigation — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add segmented-control
```

## Import

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

## Variants

- `glass` — Liquid capsule: `npx @lumioui/cli add segmented-control-glass`
- `objects` — Objects: `npx @lumioui/cli add segmented-control-objects`
- `strings` — Strings: `npx @lumioui/cli add segmented-control-strings`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `options` | `string[] | SegmentedControlOption[]` | Options to display. Can be string[] or SegmentedControlOption[]. |
| `value` | `string` | Currently selected value. |
| `onValueChange` | `(value: string) => void` | — |
| `disabled?` | `boolean` | Disable all segments. Default false. |
| `className?` | `string` | Extra classes for the container. |
| `haptic?` | `"selection" | "light" | false` | Haptic feedback on segment change. Default "selection". |
| `size?` | `"sm" | "md"` | Density — "sm" compresses rows for toolbars and card headers. |
| `glass?` | `boolean` | Glass treatment — the track becomes a glass capsule and the  gliding indicator a raised glass pill that refracts what's beneath. |
| `draggable?` | `boolean` | Let the finger drag the thumb: it tracks 1:1, ticks the haptic as it  crosses each segment and snaps to the nearest one on release. Default false. |
| `progress?` | `SharedValue<number>` | Mirrors the thumb's position (0 to n-1, fractional while gliding) on the  UI thread, so the content below can follow the glide. |

Source: https://lumioui.com/components/segmented-control