Segmented Control

Equal segments in a recessed track, selected by a pane of glass that slides beneath the labels and refracts them as it passes.

Install

$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/segmented-control.json

Examples

Default

"use client";

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

export function SegmentedControlDemo() {
  return (
    <SegmentedControl
      defaultValue="day"
      options={[
        { value: "day", label: "Day" },
        { value: "week", label: "Week" },
        { value: "month", label: "Month" },
        { value: "year", label: "Year" },
      ]}
    />
  );
}

API

<SegmentedControl />

Prop	Type	Default	Description
options	{ value, label, disabled? }[]	—	The segments, in order.
value	string	—	Controlled selection.
defaultValue	string	first option	Uncontrolled initial selection.
onValueChange	(value: string) => void	—	Selection callback.
size	"sm" \| "default"	"default"	Track height.