Toggle Group | Bearnie

<ToggleGroup type="single" defaultValue="center">
<ToggleGroupItem value="left" aria-label="Align left">
  <AlignLeft class="size-4" />
</ToggleGroupItem>
<ToggleGroupItem value="center" aria-label="Align center">
  <AlignCenter class="size-4" />
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Align right">
  <AlignRight class="size-4" />
</ToggleGroupItem>
</ToggleGroup>

Installation

npx bearnie add toggle-group

import ToggleGroup from "@/components/ui/toggle/ToggleGroup.astro";
import ToggleGroupItem from "@/components/ui/toggle/ToggleGroupItem.astro";

Usage

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle"

<ToggleGroup type="single">
<ToggleGroupItem value="a">A</ToggleGroupItem>
<ToggleGroupItem value="b">B</ToggleGroupItem>
<ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

Examples

Outline

<ToggleGroup type="single" variant="outline">
<ToggleGroupItem value="left" aria-label="Align left">
  <AlignLeft class="size-4" />
</ToggleGroupItem>
<ToggleGroupItem value="center" aria-label="Align center">
  <AlignCenter class="size-4" />
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Align right">
  <AlignRight class="size-4" />
</ToggleGroupItem>
</ToggleGroup>

Multiple

<ToggleGroup type="multiple" defaultValue="bold,italic">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
  <Bold class="size-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
  <Italic class="size-4" />
</ToggleGroupItem>
<ToggleGroupItem value="underline" aria-label="Toggle underline">
  <Underline class="size-4" />
</ToggleGroupItem>
</ToggleGroup>

Sizes

<div class="flex flex-col items-start gap-4">
<ToggleGroup type="single" size="sm">
  <ToggleGroupItem value="left" aria-label="Align left">
    <AlignLeft class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <AlignCenter class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <AlignRight class="size-4" />
  </ToggleGroupItem>
</ToggleGroup>
<ToggleGroup type="single" size="default">
  <ToggleGroupItem value="left" aria-label="Align left">
    <AlignLeft class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <AlignCenter class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <AlignRight class="size-4" />
  </ToggleGroupItem>
</ToggleGroup>
<ToggleGroup type="single" size="lg">
  <ToggleGroupItem value="left" aria-label="Align left">
    <AlignLeft class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <AlignCenter class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <AlignRight class="size-4" />
  </ToggleGroupItem>
</ToggleGroup>
</div>

Vertical

<ToggleGroup type="single" orientation="vertical" defaultValue="center">
<ToggleGroupItem value="left" aria-label="Align left">
  <AlignLeft class="size-4" />
</ToggleGroupItem>
<ToggleGroupItem value="center" aria-label="Align center">
  <AlignCenter class="size-4" />
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Align right">
  <AlignRight class="size-4" />
</ToggleGroupItem>
</ToggleGroup>

Disabled

<ToggleGroup type="single" disabled>
<ToggleGroupItem value="left" aria-label="Align left">
  <AlignLeft class="size-4" />
</ToggleGroupItem>
<ToggleGroupItem value="center" aria-label="Align center">
  <AlignCenter class="size-4" />
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Align right">
  <AlignRight class="size-4" />
</ToggleGroupItem>
</ToggleGroup>

Anatomy

ToggleGroup - Container that manages toggle state
ToggleGroupItem - Individual toggle button within the group

Props

ToggleGroup

Prop	Type	Default	Description
type	”single” \| “multiple"	"single”	Whether single or multiple items can be pressed
variant	”default” \| “outline"	"default”	Visual style variant
size	”sm” \| “default” \| “lg"	"default”	Size of the toggle items
orientation	”horizontal” \| “vertical"	"horizontal”	Layout orientation
defaultValue	string \| string[]	-	Default pressed value(s)
disabled	boolean	false	Disables all items in the group
class	string	-	Additional CSS classes

ToggleGroupItem

Prop	Type	Default	Description
value	string	-	Unique value for the item (required)
disabled	boolean	false	Disables the toggle item
class	string	-	Additional CSS classes