Skip to main content
The ToggleGroup component provides a set of toggle buttons that can work in single or multiple selection mode.

​
Installation

import { ToggleGroup, ToggleGroupItem } from "@craftdotui/baseui/components/toggle-group";

​
Usage

<ToggleGroup>
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

​
Components

​
ToggleGroup

​
value
string | string[]
Controlled selected value(s).
​
defaultValue
string | string[]
Default selected value(s).
​
onValueChange
function
Callback when selection changes.
​
type
string
default:"single"
Selection type. Options: single, multiple
​
orientation
string
default:"horizontal"
Orientation. Options: horizontal, vertical
​
variant
string
default:"default"
Visual variant. Options: default, outline
​
size
string
default:"md"
Size for all items. Options: sm, md, lg, icon

​
ToggleGroupItem

​
value
string
required
Value of this toggle.
​
disabled
boolean
Disable this item.

​
Examples

​
Text Alignment

import { AlignLeft, AlignCenter, AlignRight } from "lucide-react";

<ToggleGroup type="single">
  <ToggleGroupItem value="left" size="icon">
    <AlignLeft />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" size="icon">
    <AlignCenter />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" size="icon">
    <AlignRight />
  </ToggleGroupItem>
</ToggleGroup>

​
Text Formatting (Multiple)

import { Bold, Italic, Underline } from "lucide-react";

<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold" size="icon">
    <Bold />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" size="icon">
    <Italic />
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" size="icon">
    <Underline />
  </ToggleGroupItem>
</ToggleGroup>

​
Outline Variant

<ToggleGroup variant="outline">
  <ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
  <ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
  <ToggleGroupItem value="option3">Option 3</ToggleGroupItem>
</ToggleGroup>

​
Vertical Orientation

<ToggleGroup orientation="vertical">
  <ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
  <ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
</ToggleGroup>

​
Controlled

const [value, setValue] = useState('center');

<ToggleGroup value={value} onValueChange={setValue}>
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

​
Accessibility

  • Built on @base-ui/react for accessibility
  • Keyboard navigation (Arrow keys)
  • Proper ARIA roles and attributes
  • Focus management
  • Single or multiple selection modes

Build docs developers (and LLMs) love

Get started for freeTalk to us