Toggle Group

A toggle group component that allows single or multiple selection from a set of toggle buttons.

1. Import

Import the Toggle Group component from the design system.

import { ToggleGroup, ToggleGroupItem } from "@/design-system/components/ui/toggle-group"

2. Props

Toggle Group component props.

Prop	Type	Default
variant	"default" \| "outline"	"default"
multiple	boolean	false
value	string \| string[]	--
defaultValue	string \| string[]	--
onValueChange	(value: string \| string[]) => void	--
disabled	boolean	false
className	string	--

3. Usages

Common Toggle Group patterns and configurations.

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Bold, Italic, Underline } from "lucide-react";

export function ToggleGroupDemo() {
  return (
    <ToggleGroup variant="outline" 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="strikethrough" aria-label="Toggle strikethrough">
        <Underline className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}