Segmented control

Installation

$ npx shadcn@latest add https://goodui.dev/r/segmented-control.json

The file lands in components/goodui/segmented-control.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/segmented-control works too.

Usage

import { MapPin, Phone, Video } from "lucide-react"
import { SegmentedControl } from "@/components/goodui/segmented-control"

type AppointmentType = "in-person" | "video" | "phone"

export function AppointmentTypePicker({ value, onChange }: { value: AppointmentType; onChange: (v: AppointmentType) => void }) {
  return (
    <SegmentedControl
      aria-label="Appointment type"
      fullWidth
      value={value}
      onValueChange={(v) => onChange(v as AppointmentType)}
      options={[
        { value: "in-person", label: "In person", icon: MapPin },
        { value: "video", label: "Video", icon: Video },
        { value: "phone", label: "Phone", icon: Phone },
      ]}
    />
  )
}

When to use

Examples

const [period, setPeriod] = React.useState("monthly")

<SegmentedControl
  aria-label="Billing period"
  size="lg"
  value={period}
  onValueChange={setPeriod}
  options={[
    { value: "monthly", label: "Monthly" },
    { value: "yearly", label: "Yearly (−20%)" },
  ]}
/>
<NumberFlow value={period === "yearly" ? 23 : 29} prefix="$" className="text-4xl font-semibold" />

<SegmentedControl
  aria-label="Layout"
  size="sm"
  defaultValue="list"
  options={[
    { value: "list", icon: List, ariaLabel: "List view" },
    { value: "grid", icon: LayoutGrid, ariaLabel: "Grid view" },
    { value: "map", icon: MapIcon, ariaLabel: "Map view" },
  ]}
/>

API reference

Accessibility

• •The root is role="radiogroup" and each segment is a <button role="radio"> with aria-checked, using a roving tabindex.
• •Give the group a name with aria-label (it is passed to the root). Icon-only options need ariaLabel.
• •disabled on the root sets aria-disabled and disables every segment; disabled on an option skips it in keyboard navigation.

Motion

• •The thumb is one shared-layout element that slides to the selected segment on a spring (stiffness 500, damping 32, mass 0.9).
• •While pressed, the thumb squeezes to 0.95 scale, and an unselected segment's label to 0.96.
• •Hairline dividers between unselected neighbours fade out in 200 ms next to the thumb, like iOS.
• •Reduced motion: no squeeze, and the thumb jumps to the new segment.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related