Toggle Group

Installation

$ npx shadcn@latest add https://goodui.dev/r/toggle-group.json

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

Usage

import * as React from "react"
import { CalendarDays, CalendarRange, LayoutList } from "lucide-react"
import { ToggleGroup, ToggleGroupItem } from "@/components/goodui/toggle-group"

export function CalendarToolbar() {
  const [view, setView] = React.useState<string | null>("week")
  const [days, setDays] = React.useState<string[]>(["Mon", "Tue", "Wed"])

  return (
    <div className="flex flex-wrap gap-4">
      <ToggleGroup
        aria-label="Calendar view"
        variant="segmented"
        value={view}
        onValueChange={setView}
        items={[
          { value: "day", label: "Day", icon: <CalendarDays /> },
          { value: "week", label: "Week", icon: <CalendarRange /> },
          { value: "agenda", label: "Agenda", icon: <LayoutList /> },
        ]}
      />
      <ToggleGroup type="multiple" aria-label="Working days" value={days} onValueChange={setDays}>
        {["Mon", "Tue", "Wed", "Thu", "Fri"].map((d) => (
          <ToggleGroupItem key={d} value={d}>
            {d}
          </ToggleGroupItem>
        ))}
      </ToggleGroup>
    </div>
  )
}

When to use

Examples

<ToggleGroup variant="segmented" shape="pill" aria-label="Billing period" defaultValue="yearly"
  items={[{ value: "monthly", label: "Monthly" }, { value: "yearly", label: "Yearly −20%" }]} />

<ToggleGroup variant="outline" tone="neutral" size="sm" aria-label="Layout" defaultValue="list"
  items={[
    { value: "list", icon: <List />, "aria-label": "List", title: "List" },
    { value: "grid", icon: <LayoutGrid />, "aria-label": "Grid", title: "Grid" },
  ]} />

<ToggleGroup deselectable aria-label="Reminder" items={[{ value: "sms", label: "SMS" }, { value: "email", label: "Email" }]} />

API reference

Accessibility

• •type="single" renders role="radiogroup" with role="radio" items and aria-checked (the radio pattern: arrows move and select).
• •type="multiple" renders role="group" with native buttons and aria-pressed; arrows only move focus.
• •Give the group a name with aria-label or aria-labelledby. Icon-only items need an aria-label; the icon is decorative.
• •Disabled items are skipped by the arrow keys and keep the native disabled attribute.
• •name renders hidden inputs with the selected values for native forms.

Motion

• •slide (single): one marker glides between items with a motion layout spring (stiffness 520, damping 40) and keeps its corner radius while it stretches.
• •fade: the marker fades and scales in from 0.94 over 200 ms. pop: it springs in from 0.6 over 340 ms. Both run only after the first interaction.
• •Items scale to 0.96 while pressed (neo moves into its shadow instead). none is static.
• •Reduced motion: the marker snaps (no layout animation), and press, fade and pop are off.

• •The roving tab stop is computed from the DOM after each render without extra renders unless it changes. Multiple mode never uses layout animations.

Notes for AI

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

FAQ

Related