Toggle Group

A toggle button that switches between on and off states.

@radix-ui/react-toggle-group

lucide-react

1import { Cloud, Moon, Sun } from 'lucide-react'
2
3import {
4    ToggleGroup,
5    ToggleGroupItem,
6} from '@/components/ui/toggle-group'
7
8export function ToggleGroupFilled() {
9    return (
10        <ToggleGroup type="single">
11            <ToggleGroupItem
12                variant={'outline'}
13                value="sun"
14                className="data-[state=on]:*:[svg]:fill-warning data-[state=on]:*:[svg]:stroke-warning data-[state=on]:text-primary"
15            >
16                <Sun />
17                Sunny
18            </ToggleGroupItem>
19            <ToggleGroupItem
20                variant={'outline'}
21                value="cloud"
22                className="data-[state=on]:*:[svg]:fill-gray data-[state=on]:*:[svg]:stroke-primary data-[state=on]:text-primary"
23            >
24                <Cloud />
25                Cloudy
26            </ToggleGroupItem>
27            <ToggleGroupItem
28                variant={'outline'}
29                value="moon"
30                className="data-[state=on]:*:[svg]:fill-blue data-[state=on]:*:[svg]:stroke-blue data-[state=on]:text-primary"
31            >
32                <Moon />
33                Night
34            </ToggleGroupItem>
35        </ToggleGroup>
36    )
37}
38

Installation

Install the following dependencies:

npx shadcn@latest add https://sbthemes.com/r/toggle-group.json

Examples

Ghost

1import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react'
2
3import {
4    ToggleGroup,
5    ToggleGroupItem,
6} from '@/components/ui/toggle-group'
7
8export function ToggleGroupGhost() {
9    return (
10        <ToggleGroup type="single" orientation="vertical" variant="ghost">
11            <ToggleGroupItem
12                value="left"
13                aria-label="Align Left"
14                className="data-[state=on]:bg-gray-400"
15            >
16                <AlignLeft />
17            </ToggleGroupItem>
18            <ToggleGroupItem
19                value="center"
20                aria-label="Align Center"
21                className="data-[state=on]:bg-gray-400"
22            >
23                <AlignCenter />
24            </ToggleGroupItem>
25            <ToggleGroupItem
26                value="right"
27                aria-label="Align Right"
28                className="data-[state=on]:bg-gray-400"
29            >
30                <AlignRight />
31            </ToggleGroupItem>
32        </ToggleGroup>
33    )
34}
35

Size

1import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react'
2
3import {
4    ToggleGroup,
5    ToggleGroupItem,
6} from '@/components/ui/toggle-group'
7
8export function ToggleGroupGhost() {
9    return (
10        <div className="flex flex-col gap-6">
11            <ToggleGroup
12                type="single"
13                orientation="vertical"
14                variant="outline"
15                size="sm"
16            >
17                <ToggleGroupItem
18                    value="left"
19                    aria-label="Align Left"
20                    className="transition-all hover:bg-gray-100 data-[state=on]:bg-gray-200 data-[state=on]:text-blue-600"
21                >
22                    <AlignLeft className="h-4 w-4" />
23                </ToggleGroupItem>
24                <ToggleGroupItem
25                    value="center"
26                    aria-label="Align Center"
27                    className="transition-all hover:bg-gray-100 data-[state=on]:bg-gray-200 data-[state=on]:text-blue-600"
28                >
29                    <AlignCenter className="h-4 w-4" />
30                </ToggleGroupItem>
31                <ToggleGroupItem
32                    value="right"
33                    aria-label="Align Right"
34                    className="transition-all hover:bg-gray-100 data-[state=on]:bg-gray-200 data-[state=on]:text-blue-600"
35                >
36                    <AlignRight className="h-4 w-4" />
37                </ToggleGroupItem>
38            </ToggleGroup>
39
40            <ToggleGroup
41                type="single"
42                orientation="vertical"
43                variant="outline"
44                size="default"
45            >
46                <ToggleGroupItem
47                    value="left"
48                    aria-label="Align Left"
49                    className="transition-all hover:bg-gray-100 data-[state=on]:bg-gray-200 data-[state=on]:text-blue-600"
50                >
51                    <AlignLeft className="h-5 w-5" />
52                </ToggleGroupItem>
53                <ToggleGroupItem
54                    value="center"
55                    aria-label="Align Center"
56                    className="transition-all hover:bg-gray-100 data-[state=on]:bg-gray-200 data-[state=on]:text-blue-600"
57                >
58                    <AlignCenter className="h-5 w-5" />
59                </ToggleGroupItem>
60                <ToggleGroupItem
61                    value="right"
62                    aria-label="Align Right"
63                    className="transition-all hover:bg-gray-100 data-[state=on]:bg-gray-200 data-[state=on]:text-blue-600"
64                >
65                    <AlignRight className="h-5 w-5" />
66                </ToggleGroupItem>
67            </ToggleGroup>
68
69            <ToggleGroup
70                type="single"
71                orientation="vertical"
72                variant="outline"
73                size="lg"
74            >
75                <ToggleGroupItem
76                    value="left"
77                    aria-label="Align Left"
78                    className="transition-all hover:bg-gray-100 data-[state=on]:bg-gray-200 data-[state=on]:text-blue-600"
79                >
80                    <AlignLeft className="h-6 w-6" />
81                </ToggleGroupItem>
82                <ToggleGroupItem
83                    value="center"
84                    aria-label="Align Center"
85                    className="transition-all hover:bg-gray-100 data-[state=on]:bg-gray-200 data-[state=on]:text-blue-600"
86                >
87                    <AlignCenter className="h-6 w-6" />
88                </ToggleGroupItem>
89                <ToggleGroupItem
90                    value="right"
91                    aria-label="Align Right"
92                    className="transition-all hover:bg-gray-100 data-[state=on]:bg-gray-200 data-[state=on]:text-blue-600"
93                >
94                    <AlignRight className="h-6 w-6" />
95                </ToggleGroupItem>
96            </ToggleGroup>
97        </div>
98    )
99}
100

Disabled

1import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react'
2
3import {
4    ToggleGroup,
5    ToggleGroupItem,
6} from '@/components/ui/toggle-group'
7
8export function ToggleGroupGhost() {
9    return (
10        <div className="flex flex-col gap-6">
11            <ToggleGroup
12                disabled
13                type="single"
14                orientation="vertical"
15                variant="default"
16            >
17                <ToggleGroupItem
18                    value="left"
19                    aria-label="Align Left"
20                    className="data-[state=on]:bg-primary/80"
21                >
22                    <AlignLeft className="h-4 w-4" />
23                </ToggleGroupItem>
24                <ToggleGroupItem
25                    value="center"
26                    aria-label="Align Center"
27                    className="data-[state=on]:bg-primary/80"
28                >
29                    <AlignCenter className="h-4 w-4" />
30                </ToggleGroupItem>
31                <ToggleGroupItem
32                    value="right"
33                    aria-label="Align Right"
34                    className="data-[state=on]:bg-primary/80"
35                >
36                    <AlignRight className="h-4 w-4" />
37                </ToggleGroupItem>
38            </ToggleGroup>
39
40            <ToggleGroup
41                disabled
42                type="single"
43                orientation="vertical"
44                variant="outline"
45            >
46                <ToggleGroupItem value="left" aria-label="Align Left">
47                    <AlignLeft className="h-5 w-5" />
48                </ToggleGroupItem>
49                <ToggleGroupItem value="center" aria-label="Align Center">
50                    <AlignCenter className="h-5 w-5" />
51                </ToggleGroupItem>
52                <ToggleGroupItem value="right" aria-label="Align Right">
53                    <AlignRight className="h-5 w-5" />
54                </ToggleGroupItem>
55            </ToggleGroup>
56
57            <ToggleGroup
58                disabled
59                type="single"
60                orientation="vertical"
61                variant="ghost"
62            >
63                <ToggleGroupItem value="left" aria-label="Align Left">
64                    <AlignLeft className="h-6 w-6" />
65                </ToggleGroupItem>
66                <ToggleGroupItem value="center" aria-label="Align Center">
67                    <AlignCenter className="h-6 w-6" />
68                </ToggleGroupItem>
69                <ToggleGroupItem value="right" aria-label="Align Right">
70                    <AlignRight className="h-6 w-6" />
71                </ToggleGroupItem>
72            </ToggleGroup>
73        </div>
74    )
75}
76

API Reference

Root

The parent component that contains all toggle group items.

Prop	Type	Default
asChild	`boolean`	false
type	`single` or `multiple`	single
variant	`default`, `outline`, `ghost`	default
size	`default`, `sm`, `lg`	'default'
disabled	`boolean`	-

Data attribute	Values
[data-state]	`on`, `off`
[data-disabled]	Present when disabled

ToggleGroupItem

Each toggle item inside the group should be defined separately. Don’t forget to include an aria-label for accessibility.

Prop	Type	Default
value	`string`	Required
className	`string`	-

On This Page