Toggle Group | Bearnie

<ToggleGroup type="single" defaultValue="center">
  <ToggleGroupItem value="left" aria-label="Align left">
    <HugeIcon icon={AlignHorizontalJustifyStartIcon} class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <HugeIcon icon={AlignHorizontalCenterIcon} class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <HugeIcon icon={AlignHorizontalJustifyEndIcon} class="size-4" />
  </ToggleGroupItem>
</ToggleGroup>

Installation

npx bearnie add toggle-group

Usage

import { ToggleGroup, ToggleGroupItem } from "@/components/bearnie/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">
    <HugeIcon icon={AlignHorizontalJustifyStartIcon} class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <HugeIcon icon={AlignHorizontalCenterIcon} class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <HugeIcon icon={AlignHorizontalJustifyEndIcon} class="size-4" />
  </ToggleGroupItem>
</ToggleGroup>

Multiple

<ToggleGroup type="multiple" defaultValue="TextBoldIcon,TextItalicIcon">
  <ToggleGroupItem value="TextBoldIcon" aria-label="Toggle TextBoldIcon">
    <HugeIcon icon={TextBoldIcon} class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="TextItalicIcon" aria-label="Toggle TextItalicIcon">
    <HugeIcon icon={TextItalicIcon} class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="TextUnderlineIcon" aria-label="Toggle TextUnderlineIcon">
    <HugeIcon icon={TextUnderlineIcon} 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">
      <HugeIcon icon={AlignHorizontalJustifyStartIcon} class="size-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="center" aria-label="Align center">
      <HugeIcon icon={AlignHorizontalCenterIcon} class="size-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="right" aria-label="Align right">
      <HugeIcon icon={AlignHorizontalJustifyEndIcon} class="size-4" />
    </ToggleGroupItem>
  </ToggleGroup>
  <ToggleGroup type="single" size="default">
    <ToggleGroupItem value="left" aria-label="Align left">
      <HugeIcon icon={AlignHorizontalJustifyStartIcon} class="size-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="center" aria-label="Align center">
      <HugeIcon icon={AlignHorizontalCenterIcon} class="size-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="right" aria-label="Align right">
      <HugeIcon icon={AlignHorizontalJustifyEndIcon} class="size-4" />
    </ToggleGroupItem>
  </ToggleGroup>
  <ToggleGroup type="single" size="lg">
    <ToggleGroupItem value="left" aria-label="Align left">
      <HugeIcon icon={AlignHorizontalJustifyStartIcon} class="size-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="center" aria-label="Align center">
      <HugeIcon icon={AlignHorizontalCenterIcon} class="size-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="right" aria-label="Align right">
      <HugeIcon icon={AlignHorizontalJustifyEndIcon} class="size-4" />
    </ToggleGroupItem>
  </ToggleGroup>
</div>

Vertical

<ToggleGroup type="single" orientation="vertical" defaultValue="center">
  <ToggleGroupItem value="left" aria-label="Align left">
    <HugeIcon icon={AlignHorizontalJustifyStartIcon} class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <HugeIcon icon={AlignHorizontalCenterIcon} class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <HugeIcon icon={AlignHorizontalJustifyEndIcon} class="size-4" />
  </ToggleGroupItem>
</ToggleGroup>

Disabled

<ToggleGroup type="single" disabled>
  <ToggleGroupItem value="left" aria-label="Align left">
    <HugeIcon icon={AlignHorizontalJustifyStartIcon} class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <HugeIcon icon={AlignHorizontalCenterIcon} class="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <HugeIcon icon={AlignHorizontalJustifyEndIcon} 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