Segmented control

Switch between a small set of related views.

npx shadcn@latest add @silicon-ui/segmented-control
controlchoice
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/segmented-control

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/segmented-control/segmented-control.tsx
    • components/silicon-ui/segmented-control/segmented-control.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import SegmentedControl from "@/components/silicon-ui/segmented-control/segmented-control";

API reference

PropTypeDefault
options*Segment[]—
value*string—
onValueChange*(value: string) => void—
labelstring—
onOptionIntent

Called when the pointer or focus reaches an option, before it is chosen. Use it to start loading what that option shows.

(value: string) => void—
size

`sm` (default) or `xs`, a compact 24px control for dense UI such as an Edit/Read toggle in a toolbar.

"sm" | "xs""sm"
classNamestring—

Dependencies

npm
motion
Registry
silicon-motion-tokens