Skip to content

Foundations

Segmented Control

Radio-style segmented switch with a sliding active pill that jumps instantly from the keyboard.

2 variantsMIT

Preview

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

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

Usage

Pass your own data and wire the callbacks to your agent runtime.

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

<Segmented
  label="Mode"
  value={mode}
  onValueChange={setMode}
  options={[
    { value: "ask", label: "Ask" },
    { value: "plan", label: "Plan" },
    { value: "act", label: "Act" },
  ]}
/>

Props

PropTypeDefaultDescription
options*{ value: T; label: ReactNode; disabled?: boolean }[]—Segments in order.
value / defaultValueT—Selected segment; defaults to the first.
onValueChange(value: T) => void—Called on click or arrow keys.
label*string—Accessible name of the radiogroup.
size"sm" | "md""sm"32px or 36px tall.