Toggle Group

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

type

single

multiple

variant

default

outline

size

default

disabled

#Installation

bunx --bun barefoot add toggle-group

#Usage

1"use client"23import { createSignal } from "@barefootjs/dom"4import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"56function ToggleGroupDemo() {7  const [size, setSize] = createSignal("M")8  const [formats, setFormats] = createSignal<string[]>([])910  return (11    <div className="space-y-6">12      {/* Outline variant — single selection */}13      <ToggleGroup type="single" variant="outline" defaultValue="M" onValueChange={setSize}>14        <ToggleGroupItem value="S">S</ToggleGroupItem>15        <ToggleGroupItem value="M">M</ToggleGroupItem>16        <ToggleGroupItem value="L">L</ToggleGroupItem>17      </ToggleGroup>1819      {/* Multiple selection */}20      <ToggleGroup type="multiple" onValueChange={setFormats}>21        <ToggleGroupItem value="bold">Bold</ToggleGroupItem>22        <ToggleGroupItem value="italic">Italic</ToggleGroupItem>23        <ToggleGroupItem value="underline">Underline</ToggleGroupItem>24      </ToggleGroup>25    </div>26  )27}

#Examples

#Basic

The quick brown fox jumps over the lazy dog. This sentence demonstrates how text alignment affects the readability and visual flow of your content.

1"use client"23import { createSignal } from "@barefootjs/dom"4import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"56export function ToggleGroupBasicDemo() {7  const [alignment, setAlignment] = createSignal("center")89  return (10    <div className="space-y-4">11      <ToggleGroup type="single" defaultValue="center" onValueChange={setAlignment}>12        <ToggleGroupItem value="left" aria-label="Align left">13          <AlignLeftIcon />14        </ToggleGroupItem>15        <ToggleGroupItem value="center" aria-label="Align center">16          <AlignCenterIcon />17        </ToggleGroupItem>18        <ToggleGroupItem value="right" aria-label="Align right">19          <AlignRightIcon />20        </ToggleGroupItem>21      </ToggleGroup>22      <div className={`${alignment() === "left" ? "text-left" : alignment() === "right" ? "text-right" : "text-center"} rounded-md border p-4`}>23        <p>The quick brown fox jumps over the lazy dog.</p>24      </div>25    </div>26  )27}

#Outline

The quick brown fox jumps over the lazy dog.

1"use client"23import { createSignal } from "@barefootjs/dom"4import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"56export function ToggleGroupOutlineDemo() {7  const [fontSize, setFontSize] = createSignal("M")89  return (10    <div className="space-y-4">11      <ToggleGroup type="single" variant="outline" defaultValue="M" onValueChange={setFontSize}>12        <ToggleGroupItem value="S">S</ToggleGroupItem>13        <ToggleGroupItem value="M">M</ToggleGroupItem>14        <ToggleGroupItem value="L">L</ToggleGroupItem>15      </ToggleGroup>16      <div className={`${fontSize() === "S" ? "text-sm" : fontSize() === "L" ? "text-lg" : "text-base"} rounded-md border p-4`}>17        <p>The quick brown fox jumps over the lazy dog.</p>18      </div>19    </div>20  )21}

#Multiple

The quick brown fox jumps over the lazy dog. Toggle the formatting options above to see the effect on this text.

1"use client"23import { createSignal } from "@barefootjs/dom"4import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"56export function ToggleGroupMultipleDemo() {7  const [formats, setFormats] = createSignal<string[]>([])89  return (10    <div className="space-y-4">11      <ToggleGroup type="multiple" onValueChange={setFormats}>12        <ToggleGroupItem value="Bold" aria-label="Toggle bold">13          <BoldIcon />14        </ToggleGroupItem>15        <ToggleGroupItem value="Italic" aria-label="Toggle italic">16          <ItalicIcon />17        </ToggleGroupItem>18        <ToggleGroupItem value="Underline" aria-label="Toggle underline">19          <UnderlineIcon />20        </ToggleGroupItem>21      </ToggleGroup>22      <div className={`${formats().includes("Bold") ? "font-bold" : ""} ${formats().includes("Italic") ? "italic" : ""} ${formats().includes("Underline") ? "underline" : ""} rounded-md border p-4`}>23        <p>The quick brown fox jumps over the lazy dog.</p>24      </div>25    </div>26  )27}

#API Reference

ToggleGroup

Prop	Type	Default	Description
type	'single' \| 'multiple'	-	The selection mode. "single" allows one item, "multiple" allows many.
defaultValue	string \| string[]	-	The default selected value(s) for uncontrolled mode.
value	string \| string[]	-	The controlled selected value(s). When provided, the component is in controlled mode.
onValueChange	(value: string \| string[]) => void	-	Event handler called when the selection changes.
disabled	boolean	false	Whether the entire group is disabled.
variant	'default' \| 'outline'	'default'	The visual variant applied to all items.
size	'default' \| 'sm' \| 'lg'	'default'	The size applied to all items.

ToggleGroupItem

Prop	Type	Default	Description
value	string	-	The value for this toggle item.
disabled	boolean	false	Whether this item is disabled.