kagadmodyaa

Toggle Group

ToggleCollapsible

A row of toggles where one or several can be pressed.

import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'

export default function ToggleGroupDemo() {
  return (
    <ToggleGroup variant="outline" defaultValue={['center']} aria-label="Text alignment">
      <ToggleGroupItem value="left" aria-label="Align left">
        <AlignIcon d="M4 6h16M4 12h10M4 18h14" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        <AlignIcon d="M4 6h16M7 12h10M5 18h14" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        <AlignIcon d="M4 6h16M10 12h10M6 18h14" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

function AlignIcon({ d }: { d: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={d} />
    </svg>
  )
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/toggle-group.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Toggle Group imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Its items share the styles of Toggle. The CLI installs it for you; if you copy manually, add components/ui/toggle.tsx too.

Usage

import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'

// One item at a time (the default)
<ToggleGroup variant="outline" defaultValue={['center']} aria-label="Text alignment">
  <ToggleGroupItem value="left" aria-label="Align left">L</ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">C</ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">R</ToggleGroupItem>
</ToggleGroup>

// Any number of items
<ToggleGroup multiple defaultValue={['bold']}>…</ToggleGroup>

Examples

Multiple

import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'

export default function ToggleGroupMultiple() {
  return (
    <ToggleGroup multiple defaultValue={['bold', 'italic']} aria-label="Text formatting">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <Icon d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Icon d="M19 4h-9M14 20H5M15 4 9 20" />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <Icon d="M6 4v6a6 6 0 0 0 12 0V4M4 20h16" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

function Icon({ d }: { d: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={d} />
    </svg>
  )
}

API Reference

NameTypeDefaultDescription
multiplebooleanfalseAllow several items pressed at once. Off, pressing an item releases the others.
value / onValueChangestring[] / (value: string[]) => void—Controlled values of the pressed items.
defaultValuestring[]—Initially pressed item values (uncontrolled).
variant'default' | 'outline''default'Style shared by every item. Outline joins the items into one control.
size'sm' | 'default' | 'lg''default'Size shared by every item.
orientation'horizontal' | 'vertical''horizontal'Direction of arrow-key movement.
disabledbooleanfalseIgnores user interaction for the whole group.
ToggleGroupItem valuestring—Identifies the item in the group value. Required.