Segmented Control

MonthlyYearly

Save 17%

$24 per seat / month

Installation

pnpm dlx shadcn@latest add @paneui/segmented-control

Usage

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

<SegmentedControl value={cycle} onValueChange={setCycle} aria-label="Billing cycle">
  <SegmentedControlItem value="monthly">Monthly</SegmentedControlItem>
  <SegmentedControlItem value="yearly">Yearly</SegmentedControlItem>
</SegmentedControl>

Composition

SegmentedControl
└── SegmentedControlItem

Examples

Sizes

Tabs or segmented control?

Use Tabs when the options switch panels of content. Use a segmented control when they change a value, like a billing cycle or theme. It is a radio group, so arrow keys move the selection.

Motion

Under reduced motion the thumb moves instantly.

API Reference

Built on the Radio Group primitive. Only the props this library adds or changes are listed; everything else passes through.

SegmentedControl

Also accepts every prop of RadioGroup.

value: string; Controlled value.
defaultValue: string; Initial value.
onValueChange: (value: string) => void; Called with the new value.
size= "default": "xs" | "sm" | "default" | "lg"; Outer height 24 / 28 / 32 / 36px, the Button heights; items are 4px shorter.

Prop	Type	Default	Description
value	string	—	Controlled value.
defaultValue	string	—	Initial value.
onValueChange	(value: string) => void	—	Called with the new value.
size	"xs" \| "sm" \| "default" \| "lg"	"default"	Outer height 24 / 28 / 32 / 36px, the Button heights; items are 4px shorter.

SegmentedControlItem

Also accepts every prop of Radio.Root.

value*: string; This option's value.

Prop	Type	Default	Description
value*	string	—	This option's value.