Toggle Group

A set of two-state buttons that can be toggled on or off. Supports single or multiple selection.

1
---
2
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from '@lucide/astro';
3

4
import { ToggleGroup, ToggleGroupItem } from '@bejamas/ui/components/toggle-group';
5
---
6

7
<ToggleGroup defaultValue="center" variant="outline">
8
  <ToggleGroupItem value="left" aria-label="Align left">
9
    <AlignLeftIcon />
10
  </ToggleGroupItem>
11
  <ToggleGroupItem value="center" aria-label="Align center">
12
    <AlignCenterIcon />
13
  </ToggleGroupItem>
14
  <ToggleGroupItem value="right" aria-label="Align right">
15
    <AlignRightIcon />
16
  </ToggleGroupItem>
17
</ToggleGroup>

Installation

bunx bejamas add toggle-group

npx bejamas add toggle-group

pnpm dlx bejamas add toggle-group

yarn dlx bejamas add toggle-group

Usage

1
---
2
import { ToggleGroup, ToggleGroupItem } from '@bejamas/ui/components/toggle-group';
3
import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/astro';
4
---
5

6
<ToggleGroup defaultValue="bold" variant="outline">
7
  <ToggleGroupItem value="bold" aria-label="Toggle bold">
8
    <BoldIcon />
9
  </ToggleGroupItem>
10
  <ToggleGroupItem value="italic" aria-label="Toggle italic">
11
    <ItalicIcon />
12
  </ToggleGroupItem>
13
  <ToggleGroupItem value="underline" aria-label="Toggle underline">
14
    <UnderlineIcon />
15
  </ToggleGroupItem>
16
</ToggleGroup>

Examples

Multiple Selection

1
---
2
import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/astro';
3

4
import { ToggleGroup, ToggleGroupItem } from '@bejamas/ui/components/toggle-group';
5
---
6

7
<ToggleGroup multiple defaultValue={["bold", "italic"]} variant="outline">
8
  <ToggleGroupItem value="bold" aria-label="Toggle bold">
9
    <BoldIcon />
10
  </ToggleGroupItem>
11
  <ToggleGroupItem value="italic" aria-label="Toggle italic">
12
    <ItalicIcon />
13
  </ToggleGroupItem>
14
  <ToggleGroupItem value="underline" aria-label="Toggle underline">
15
    <UnderlineIcon />
16
  </ToggleGroupItem>
17
</ToggleGroup>

Outline Variant

1
---
2
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from '@lucide/astro';
3

4
import { ToggleGroup, ToggleGroupItem } from '@bejamas/ui/components/toggle-group';
5
---
6

7
<ToggleGroup variant="outline" defaultValue="center">
8
  <ToggleGroupItem value="left" aria-label="Align left">
9
    <AlignLeftIcon />
10
  </ToggleGroupItem>
11
  <ToggleGroupItem value="center" aria-label="Align center">
12
    <AlignCenterIcon />
13
  </ToggleGroupItem>
14
  <ToggleGroupItem value="right" aria-label="Align right">
15
    <AlignRightIcon />
16
  </ToggleGroupItem>
17
</ToggleGroup>

Sizes

1
---
2
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from '@lucide/astro';
3

4
import { ToggleGroup, ToggleGroupItem } from '@bejamas/ui/components/toggle-group';
5
---
6

7
<div class="flex flex-col gap-4">
8
  <ToggleGroup size="sm" variant="outline" defaultValue="center">
9
    <ToggleGroupItem value="left" aria-label="Align left">
10
      <AlignLeftIcon />
11
    </ToggleGroupItem>
12
    <ToggleGroupItem value="center" aria-label="Align center">
13
      <AlignCenterIcon />
14
    </ToggleGroupItem>
15
    <ToggleGroupItem value="right" aria-label="Align right">
16
      <AlignRightIcon />
17
    </ToggleGroupItem>
18
  </ToggleGroup>
19
  <ToggleGroup size="default" variant="outline" defaultValue="center">
20
    <ToggleGroupItem value="left" aria-label="Align left">
21
      <AlignLeftIcon />
22
    </ToggleGroupItem>
23
    <ToggleGroupItem value="center" aria-label="Align center">
24
      <AlignCenterIcon />
25
    </ToggleGroupItem>
26
    <ToggleGroupItem value="right" aria-label="Align right">
27
      <AlignRightIcon />
28
    </ToggleGroupItem>
29
  </ToggleGroup>
30
  <ToggleGroup size="lg" variant="outline" defaultValue="center">
31
    <ToggleGroupItem value="left" aria-label="Align left">
32
      <AlignLeftIcon />
33
    </ToggleGroupItem>
34
    <ToggleGroupItem value="center" aria-label="Align center">
35
      <AlignCenterIcon />
36
    </ToggleGroupItem>
37
    <ToggleGroupItem value="right" aria-label="Align right">
38
      <AlignRightIcon />
39
    </ToggleGroupItem>
40
  </ToggleGroup>
41
</div>

Vertical Orientation

1
---
2
import { AlignVerticalJustifyCenterIcon, AlignVerticalJustifyEndIcon, AlignVerticalJustifyStartIcon } from '@lucide/astro';
3

4
import { ToggleGroup, ToggleGroupItem } from '@bejamas/ui/components/toggle-group';
5
---
6

7
<ToggleGroup orientation="vertical" variant="outline" defaultValue="middle">
8
  <ToggleGroupItem value="top" aria-label="Align top">
9
    <AlignVerticalJustifyStartIcon />
10
  </ToggleGroupItem>
11
  <ToggleGroupItem value="middle" aria-label="Align middle">
12
    <AlignVerticalJustifyCenterIcon />
13
  </ToggleGroupItem>
14
  <ToggleGroupItem value="bottom" aria-label="Align bottom">
15
    <AlignVerticalJustifyEndIcon />
16
  </ToggleGroupItem>
17
</ToggleGroup>

Disabled

1
---
2
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from '@lucide/astro';
3

4
import { ToggleGroup, ToggleGroupItem } from '@bejamas/ui/components/toggle-group';
5
---
6

7
<ToggleGroup disabled variant="outline" defaultValue="center">
8
  <ToggleGroupItem value="left" aria-label="Align left">
9
    <AlignLeftIcon />
10
  </ToggleGroupItem>
11
  <ToggleGroupItem value="center" aria-label="Align center">
12
    <AlignCenterIcon />
13
  </ToggleGroupItem>
14
  <ToggleGroupItem value="right" aria-label="Align right">
15
    <AlignRightIcon />
16
  </ToggleGroupItem>
17
</ToggleGroup>

API Reference

Events

Event	Detail	Description
`toggle-group:change`	`{ value: string[] }`	Fired when the selection changes

Programmatic Control

// Set selected values programmatically
element.dispatchEvent(new CustomEvent('toggle-group:set', {
  detail: { value: ['bold', 'italic'] }
}));

Data Attributes

Attribute	Element	Description
`data-state`	toggle-group-item	Current state: `on` or `off`
`data-disabled`	toggle-group	Present when group is disabled
`data-orientation`	toggle-group	Orientation: `horizontal` or `vertical`
`data-variant`	toggle-group	Visual variant: `default` or `outline`
`data-size`	toggle-group	Size: `sm`, `default`, or `lg`