Segmented Control

A segmented control lets users pick one option from a small set, with a pill indicator that slides to the selection.

<SegmentedControl defaultSelectedKeys={['week']} aria-label="Date range">
  <SegmentedControlItem id="day">Day</SegmentedControlItem>
  <SegmentedControlItem id="week">Week</SegmentedControlItem>
  <SegmentedControlItem id="month">Month</SegmentedControlItem>
</SegmentedControl>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/segmented-control

Usage

Use a segmented control for a small set of mutually exclusive options — view modes, ranges, filters. It's built on ToggleButtonGroup with single selection, and the indicator slides between segments (React Aria's SelectionIndicator).

import {
  SegmentedControl,
  SegmentedControlItem,
} from '@/components/ui/segmented-control'

<SegmentedControl aria-label="Date range" defaultSelectedKeys={['week']}>
  <SegmentedControlItem id="day">Day</SegmentedControlItem>
  <SegmentedControlItem id="week">Week</SegmentedControlItem>
  <SegmentedControlItem id="month">Month</SegmentedControlItem>
</SegmentedControl>

Anatomy

A SegmentedControl wraps one SegmentedControlItem per option. Each item needs a unique id, which is the value the control reports as selected.

import {
  SegmentedControl,
  SegmentedControlItem,
} from '@/components/ui/segmented-control'
;<SegmentedControl>
  <SegmentedControlItem id="…">…</SegmentedControlItem>
</SegmentedControl>

Selection

Selection is single-only and can never be empty (disallowEmptySelection). Use defaultSelectedKeys for uncontrolled state, or selectedKeys with onSelectionChange to control it — both are a Set of item ids.

const [selected, setSelected] = React.useState(new Set(['week']))

<SegmentedControl
  aria-label="Date range"
  selectedKeys={selected}
  onSelectionChange={setSelected}
>
  <SegmentedControlItem id="day">Day</SegmentedControlItem>
  <SegmentedControlItem id="week">Week</SegmentedControlItem>
  <SegmentedControlItem id="month">Month</SegmentedControlItem>
</SegmentedControl>

Examples

Default

With icons

API Reference

A segmented control lets the user pick one option from a small, mutually exclusive set, with a pill indicator that slides to the selection.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`boolean`	`—`
	`Orientation`	`'horizontal'`

	`Iterable<Key>`	`—`
	`Iterable<Key>`	`—`
	`function`	`—`
	`boolean`	`—`

A single segment within a `SegmentedControl`. Each item needs a unique `id`, which is the value reported by the control's selection.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`boolean`	`—`
	`Key`	`—`
	`boolean`	`—`
	`boolean`	`—`

	`function`	`—`

Last updated on 7/21/2026