Segmented Control

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

On this page

<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>

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/1/2026