Segmented controlforms
Two to five option single-choice control built on toggle-group with radio semantics, icons and a full-width mode.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/segmented-control의존 아이템localestyletoggle-group
Default
segmented-control-demo.tsx
"use client";
import * as React from "react";import { SegmentedControl } from "@/components/ui/segmented-control";
const views = [ { value: "day", label: "Day" }, { value: "week", label: "Week" }, { value: "month", label: "Month" },];
export default function SegmentedControlDemo() { const [view, setView] = React.useState("week"); return ( <div className="flex flex-col gap-2"> <SegmentedControl aria-label="Calendar view" options={views} value={view} onValueChange={setView} name="view" /> <p className="text-sm text-muted-foreground">View: {view}</p> </div> );}