---
title: Segmented
description: A single-choice control with a sliding selection indicator.
---
import Source from './_generated/segmented.mdx';

A single-choice control. iOS renders the inset grouped pill with a sliding thumb; Android renders an MD3 connected button group whose selected segment fills with the secondary container and shows a checkmark. Both platforms share the same markup — the cascade decides the look.

<DemoFrame component="segmented" />

## Installation

```bash
npx touchcn add segmented
```

## Usage

<CodeGroup>

```html Angular
<tcn-segmented [(value)]="range">
  <tcn-segment value="day" label="Day" />
  <tcn-segment value="week" label="Week" />
  <tcn-segment value="month" label="Month" />
</tcn-segmented>
```

```tsx React
import { TcnSegmented, TcnSegment } from '@/components/ui/segmented';

<TcnSegmented value={range} onValueChange={setRange}>
  <TcnSegment value="day">Day</TcnSegment>
  <TcnSegment value="week">Week</TcnSegment>
  <TcnSegment value="month">Month</TcnSegment>
</TcnSegmented>
```

```vue Vue
<script setup lang="ts">
import { TcnSegmented, TcnSegment } from '@/components/ui/segmented';
</script>

<template>
  <TcnSegmented v-model="range">
    <TcnSegment value="day">Day</TcnSegment>
    <TcnSegment value="week">Week</TcnSegment>
    <TcnSegment value="month">Month</TcnSegment>
  </TcnSegmented>
</template>
```

</CodeGroup>

The control carries `role="radiogroup"` and each segment `role="radio"`, with roving `tabindex` and arrow-key navigation — the segmented-control accessibility convention.

## Props

### Segmented

| Prop       | Type      | Default | Description                    |
| ---------- | --------- | ------- | ------------------------------ |
| `value`    | `string`  | `''`    | Selected segment value.        |
| `disabled` | `boolean` | `false` | Disable the whole control.     |

### Segment

| Prop       | Type      | Default | Description                                     |
| ---------- | --------- | ------- | ----------------------------------------------- |
| `value`    | `string`  | —       | Identifies the segment (required).              |
| `label`    | `string`  | `''`    | Segment text (Angular; React uses children).    |
| `disabled` | `boolean` | `false` | Disable this segment.                           |

<Source />