Toggle Group

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

Kobalte

The Toggle Group component is built on top of Kobalte Toggle Group, which provides accessible toggle buttons, keyboard navigation, and focus behavior.

1
import { Bold, Italic, Underline } from "lucide-solid";
2

3
import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";
4

5
export default function ToggleGroupDemo() {
6
  return (
7
    <ToggleGroup variant="outline" multiple>
8
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
9
        <Bold />
10
      </ToggleGroupItem>
11
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
12
        <Italic />
13
      </ToggleGroupItem>
14
      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
15
        <Underline />
16
      </ToggleGroupItem>
17
    </ToggleGroup>
18
  );
19
}

Installation

pnpm dlx shadcn@latest add @zaidan/toggle-group
npx shadcn@latest add @zaidan/toggle-group
yarn dlx shadcn@latest add @zaidan/toggle-group
bunx --bun shadcn@latest add @zaidan/toggle-group

Usage

1
import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";

1
<ToggleGroup defaultValue="a">
2
  <ToggleGroupItem value="a">A</ToggleGroupItem>
3
  <ToggleGroupItem value="b">B</ToggleGroupItem>
4
  <ToggleGroupItem value="c">C</ToggleGroupItem>
5
</ToggleGroup>

Composition

Use the following composition to build ToggleGroup:

ToggleGroup
├── ToggleGroupItem
└── ToggleGroupItem

Outline

Use variant="outline" for an outline style.

1
import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";
2

3
export default function ToggleGroupOutline() {
4
  return (
5
    <ToggleGroup variant="outline" defaultValue="all">
6
      <ToggleGroupItem value="all" aria-label="Toggle all">
7
        All
8
      </ToggleGroupItem>
9
      <ToggleGroupItem value="missed" aria-label="Toggle missed">
10
        Missed
11
      </ToggleGroupItem>
12
    </ToggleGroup>
13
  );
14
}

Size

Use the size prop to change the size of the toggle group.

1
import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";
2

3
export default function ToggleGroupSizes() {
4
  return (
5
    <div class="flex flex-col gap-4">
6
      <ToggleGroup size="sm" defaultValue="top" variant="outline">
7
        <ToggleGroupItem value="top" aria-label="Toggle top">
8
          Top
9
        </ToggleGroupItem>
10
        <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
11
          Bottom
12
        </ToggleGroupItem>
13
        <ToggleGroupItem value="left" aria-label="Toggle left">
14
          Left
15
        </ToggleGroupItem>
16
        <ToggleGroupItem value="right" aria-label="Toggle right">
17
          Right
18
        </ToggleGroupItem>
19
      </ToggleGroup>
20
      <ToggleGroup defaultValue="top" variant="outline">
21
        <ToggleGroupItem value="top" aria-label="Toggle top">
22
          Top
23
        </ToggleGroupItem>
24
        <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
25
          Bottom
26
        </ToggleGroupItem>
27
        <ToggleGroupItem value="left" aria-label="Toggle left">
28
          Left
29
        </ToggleGroupItem>
30
        <ToggleGroupItem value="right" aria-label="Toggle right">
31
          Right
32
        </ToggleGroupItem>
33
      </ToggleGroup>
34
    </div>
35
  );
36
}

Spacing

Use spacing to add spacing between toggle group items.

1
import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";
2

3
export default function ToggleGroupSpacing() {
4
  return (
5
    <ToggleGroup size="sm" defaultValue="top" variant="outline" spacing={2}>
6
      <ToggleGroupItem value="top" aria-label="Toggle top">
7
        Top
8
      </ToggleGroupItem>
9
      <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
10
        Bottom
11
      </ToggleGroupItem>
12
      <ToggleGroupItem value="left" aria-label="Toggle left">
13
        Left
14
      </ToggleGroupItem>
15
      <ToggleGroupItem value="right" aria-label="Toggle right">
16
        Right
17
      </ToggleGroupItem>
18
    </ToggleGroup>
19
  );
20
}

Vertical

Use orientation="vertical" for vertical toggle groups.

1
import { Bold, Italic, Underline } from "lucide-solid";
2

3
import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";
4

5
export default function ToggleGroupVertical() {
6
  return (
7
    <ToggleGroup multiple orientation="vertical" spacing={1} defaultValue={["bold", "italic"]}>
8
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
9
        <Bold />
10
      </ToggleGroupItem>
11
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
12
        <Italic />
13
      </ToggleGroupItem>
14
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
15
        <Underline />
16
      </ToggleGroupItem>
17
    </ToggleGroup>
18
  );
19
}

Disabled

1
import { Bold, Italic, Underline } from "lucide-solid";
2

3
import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";
4

5
export default function ToggleGroupDisabled() {
6
  return (
7
    <ToggleGroup disabled>
8
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
9
        <Bold />
10
      </ToggleGroupItem>
11
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
12
        <Italic />
13
      </ToggleGroupItem>
14
      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
15
        <Underline />
16
      </ToggleGroupItem>
17
    </ToggleGroup>
18
  );
19
}

Custom

A custom toggle group example.

1
import { createSignal } from "solid-js";
2

3
import { Field, FieldDescription, FieldLabel } from "~/components/ui/field";
4
import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";
5

6
export default function ToggleGroupFontWeightSelector() {
7
  const [fontWeight, setFontWeight] = createSignal("normal");
8

9
  return (
10
    <Field>
11
      <FieldLabel>Font Weight</FieldLabel>
12
      <ToggleGroup
13
        value={fontWeight()}
14
        onChange={(value) => setFontWeight(value ?? "normal")}
15
        variant="outline"
16
        spacing={2}
17
        size="lg"
18
      >
19
        <ToggleGroupItem
20
          value="light"
21
          aria-label="Light"
22
          class="flex size-16 flex-col items-center justify-center rounded-xl"
23
        >
24
          <span class="text-2xl leading-none font-light">Aa</span>
25
          <span class="text-xs text-muted-foreground">Light</span>
26
        </ToggleGroupItem>
27
        <ToggleGroupItem
28
          value="normal"
29
          aria-label="Normal"
30
          class="flex size-16 flex-col items-center justify-center rounded-xl"
31
        >
32
          <span class="text-2xl leading-none font-normal">Aa</span>
33
          <span class="text-xs text-muted-foreground">Normal</span>
34
        </ToggleGroupItem>
35
        <ToggleGroupItem
36
          value="medium"
37
          aria-label="Medium"
38
          class="flex size-16 flex-col items-center justify-center rounded-xl"
39
        >
40
          <span class="text-2xl leading-none font-medium">Aa</span>
41
          <span class="text-xs text-muted-foreground">Medium</span>
42
        </ToggleGroupItem>
43
        <ToggleGroupItem
44
          value="bold"
45
          aria-label="Bold"
46
          class="flex size-16 flex-col items-center justify-center rounded-xl"
47
        >
48
          <span class="text-2xl leading-none font-bold">Aa</span>
49
          <span class="text-xs text-muted-foreground">Bold</span>
50
        </ToggleGroupItem>
51
      </ToggleGroup>
52
      <FieldDescription>
53
        Use <code class="rounded-md bg-muted px-1 py-0.5 font-mono">font-{fontWeight()}</code> to
54
        set the font weight.
55
      </FieldDescription>
56
    </Field>
57
  );
58
}

By default ToggleGroup only allows a single item to be pressed at a time. In that mode value/defaultValue are a single string | null and onChange receives string | null. Pass multiple to allow several items to be pressed at once — in that mode value/defaultValue are a string[] and onChange receives string[].

1
// single (default)
2
<ToggleGroup defaultValue="bold" onChange={(value) => console.log(value)}>
3

4
// multiple
5
<ToggleGroup multiple defaultValue={["bold"]} onChange={(value) => console.log(value)}>

API Reference

For primitive props, keyboard behavior, and accessibility details, see the Kobalte Toggle Group API reference.