Command Palette

Search for a command to run...

Toggle Group

A set of two-state buttons that can be toggled on or off.

A toggle group component built on top of Radix UI Toggle Group.

Installation

npx shadcn@latest add toggle-group

Usage

import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
<ToggleGroup type="multiple">
<ToggleGroupItem value="bold">Bold</ToggleGroupItem>
<ToggleGroupItem value="italic">Italic</ToggleGroupItem>
<ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>

Examples

Multiple

import { Bold, Italic, Underline } from "lucide-react"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
export default function ToggleGroupDemo() {
return (
  <ToggleGroup type="multiple">
    <ToggleGroupItem value="bold" aria-label="Toggle bold">
      <Bold className="h-4 w-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="italic" aria-label="Toggle italic">
      <Italic className="h-4 w-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="underline" aria-label="Toggle underline">
      <Underline className="h-4 w-4" />
    </ToggleGroupItem>
  </ToggleGroup>
)
}

Single

import { Bold, Italic, Underline } from "lucide-react"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
export default function ToggleGroupDemo() {
return (
  <ToggleGroup type="single">
    <ToggleGroupItem value="bold" aria-label="Toggle bold">
      <Bold className="h-4 w-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="italic" aria-label="Toggle italic">
      <Italic className="h-4 w-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="underline" aria-label="Toggle underline">
      <Underline className="h-4 w-4" />
    </ToggleGroupItem>
  </ToggleGroup>
)
}

Outline

import { Bold, Italic, Underline } from "lucide-react"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
export default function ToggleGroupDemo() {
return (
  <ToggleGroup variant="outline" type="multiple">
    <ToggleGroupItem value="bold" aria-label="Toggle bold">
      <Bold className="h-4 w-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="italic" aria-label="Toggle italic">
      <Italic className="h-4 w-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="underline" aria-label="Toggle underline">
      <Underline className="h-4 w-4" />
    </ToggleGroupItem>
  </ToggleGroup>
)
}

Disabled

import { Bold, Italic, Underline } from "lucide-react"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
export default function ToggleGroupDemo() {
return (
  <ToggleGroup disabled type="single">
    <ToggleGroupItem value="bold" aria-label="Toggle bold">
      <Bold className="h-4 w-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="italic" aria-label="Toggle italic">
      <Italic className="h-4 w-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="underline" aria-label="Toggle underline">
      <Underline className="h-4 w-4" />
    </ToggleGroupItem>
  </ToggleGroup>
)
}

Size

import { Bold, Italic, Underline } from "lucide-react"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
export default function ToggleGroupSizes() {
return (
  <div className="flex flex-col space-y-4">
    <ToggleGroup size="sm" type="multiple">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <Bold className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Italic className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <Underline className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
    <ToggleGroup type="multiple">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <Bold className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Italic className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <Underline className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
    <ToggleGroup size="lg" type="multiple">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <Bold className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Italic className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <Underline className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  </div>
)
}

Props

ToggleGroup

Extends React.ComponentProps<typeof ToggleGroupPrimitive.Root>

| Prop | Type | Default | Description | | :-- | :-- | :-- | :-- | | type | "single" \| "multiple" | undefined | Determines whether a single or multiple items can be pressed at a time. | | variant | "default" \| "outline" | "default" | The variant of the toggle group. | | size | "default" \| "sm" \| "lg" | "default" | The size of the toggle group. | | disabled | boolean | false | When true, prevents the user from interacting with the toggle group. | | value | string \| string[] | undefined | The controlled value of the toggle group. | | defaultValue | string \| string[] | undefined | The default value of the toggle group when initially rendered. | | onValueChange | (value: string \| string[]) => void | undefined | Event handler called when the value changes. |

ToggleGroupItem

Extends React.ComponentProps<typeof ToggleGroupPrimitive.Item>

| Prop | Type | Default | Description | | :-- | :-- | :-- | :-- | | value | string | undefined | A unique value for the item. | | disabled | boolean | false | When true, prevents the user from interacting with the item. | | variant | "default" \| "outline" | undefined | Override the variant of the toggle group for this item. | | size | "default" \| "sm" \| "lg" | undefined | Override the size of the toggle group for this item. |