Segmented Control

DailyWeeklyMonthly

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/segmented-control.json

npx shadcn@latest add https://prototyper-ui.com/r/segmented-control.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/segmented-control.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/segmented-control.json

This will add the following files to your project:

components/ui/segmented-control.tsx

Usage

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

<SegmentedControl defaultValue="option-1">
  <SegmentedControlItem value="option-1">Option 1</SegmentedControlItem>
  <SegmentedControlItem value="option-2">Option 2</SegmentedControlItem>
  <SegmentedControlItem value="option-3">Option 3</SegmentedControlItem>
</SegmentedControl>

Anatomy

<SegmentedControl>
  <SegmentedControlItem />
</SegmentedControl>

Sub-component	`data-slot`	Purpose	Required
`SegmentedControl`	`segmented-control`	Root container and radio group	Yes
`SegmentedControlItem`	`segmented-control-item`	Individual selectable option	Yes

Examples

Small

GridListTable

Styling

Data Slots

Use data-slot attributes to target specific parts of the segmented control:

Slot name	Element
`segmented-control`	Root container
`segmented-control-item`	Individual option button
`segmented-control-indicator`	Check indicator inside each item

Customization Examples

/* Squared segmented control */
[data-slot="segmented-control"] {
  @apply rounded-lg;
}

[data-slot="segmented-control-item"] {
  @apply rounded-md;
}

<SegmentedControl className="rounded-lg">
  <SegmentedControlItem className="rounded-md" value="a">A</SegmentedControlItem>
  <SegmentedControlItem className="rounded-md" value="b">B</SegmentedControlItem>
</SegmentedControl>

API Reference

SegmentedControl

Root container that manages selection state. Built on Base UI RadioGroup.

Prop

Type

All Base UI RadioGroup props are forwarded via ...props.

SegmentedControlItem

An individual selectable option within the segmented control.

Prop

Type

All Base UI Radio props are forwarded via ...props.

segmentedControlVariants

A cva helper exported for applying segmented control styles outside the component.

import { segmentedControlVariants } from "@/components/ui/segmented-control"

<div className={segmentedControlVariants({ size: "sm" })}>Custom element</div>

Accessibility

Keyboard Interactions

Key	Action
`Tab`	Moves focus to the segmented control
`ArrowRight`	Moves focus and selection to the next item
`ArrowLeft`	Moves focus and selection to the previous item
`Space`	Selects the focused item

ARIA Attributes

The root renders with role="radiogroup" via Base UI.
Each item renders with role="radio".
aria-checked is set to true on the selected item, false on others.
aria-disabled is set when the control or individual items are disabled.

On this page