shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/toggle-group.jsonnpx shadcn@latest add https://kit.dev/r/aria/toggle-group.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/toggle-group.jsonyarn shadcn@latest add https://kit.dev/r/aria/toggle-group.jsonThis component depends on Toggle. Install it first if you haven't already.
Install the following dependencies:
bun add react-aria-components tailwind-variantsnpm install react-aria-components tailwind-variantspnpm add react-aria-components tailwind-variantsyarn add react-aria-components tailwind-variantsCopy and paste the following code into your project.
"use client";
import React from "react";
import {
type ToggleButtonGroupProps,
type ToggleButtonProps,
ToggleButtonGroup as ToggleGroupPrimitive,
ToggleButton as TogglePrimitive,
} from "react-aria-components";
import type { VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
import { toggleVariants } from "@/registry/aria/components/toggle";
const ToggleGroupContext = React.createContext<
VariantProps<typeof toggleVariants> & {
orientation?: "horizontal" | "vertical";
spacing?: number;
}Update the import paths to match your project setup.
Anatomy
useToggleGroup
└── ToggleGroupItemUsage
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group";<ToggleGroup multiple variant="outline">
<ToggleGroupItem aria-label="Toggle bold" value="bold">
<BoldIcon aria-hidden="true" />
</ToggleGroupItem>
<ToggleGroupItem aria-label="Toggle italic" value="italic">
<ItalicIcon aria-hidden="true" />
</ToggleGroupItem>
<ToggleGroupItem aria-label="Toggle strikethrough" value="strikethrough">
<UnderlineIcon aria-hidden="true" />
</ToggleGroupItem>
</ToggleGroup>Accessibility
| Key | Description |
|---|---|
Enter | Activate the focused control. |
Space | Activate the focused control. |
Tab | Toggle. |
ArrowLeft | Move to the previous item. |
ArrowRight | Move to the next item. |
ArrowUp | Move to the previous item. |
ArrowDown | Move to the next item. |
Home | Move to the first item. |
End | Move to the last item. |
Demos
Outline
Use variant="outline" for an outline style.
Sizes
Use the size prop to change the size of the toggle group.
Spacing
Use spacing to add spacing between toggle group items.
Vertical
Use orientation="vertical" for vertical toggle groups.
Disabled
A disabled toggle group.
Font Weight Selector
A custom toggle group example.
Rtl
Right-to-left toggle group. See the RTL configuration guide for document direction.
API Reference
ToggleGroup
PropType
AttributeType
CSS variableType
--gapstring--spacingstringToggleGroupItem
PropType
AttributeType
data-spacing?string