shadcn.io is not affiliated with official shadcn/ui

Shadcn Toggle Group for React

Toggle buttons for selecting a value.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/toggle-group.json

npx shadcn@latest add https://kit.dev/r/radix/toggle-group.json

pnpm dlx shadcn@latest add https://kit.dev/r/radix/toggle-group.json

yarn shadcn@latest add https://kit.dev/r/radix/toggle-group.json

This component depends on Toggle. Install it first if you haven't already.

Install the following dependencies:

bun add radix-ui tailwind-variants

npm install radix-ui tailwind-variants

pnpm add radix-ui tailwind-variants

yarn add radix-ui tailwind-variants

Copy and paste the following code into your project.

components/ui/toggle-group.tsx

"use client";

import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
import React from "react";
import type { VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
import { toggleVariants } from "@/registry/radix/components/toggle";

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants> & {
    orientation?: "horizontal" | "vertical";
    spacing?: number;
  }
>({
  orientation: "horizontal",
  size: "md",
  spacing: 2,
  variant: "default",

Update the import paths to match your project setup.

Anatomy

useToggleGroup
└── ToggleGroupItem

Usage

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.

PreviewCode

Sizes

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

PreviewCode

Spacing

Use spacing to add spacing between toggle group items.

PreviewCode

Vertical

Use orientation="vertical" for vertical toggle groups.

PreviewCode

Disabled

A disabled toggle group.

PreviewCode

Font Weight Selector

A custom toggle group example.

PreviewCode

Rtl

Right-to-left toggle group. See the RTL configuration guide for document direction.

PreviewCode

API Reference

ToggleGroup

div

PropType

type"multiple"

valuestring[]): void

defaultValue?string[]

dir?RovingFocusGroupProps["dir"]

disabled?boolean

loop?RovingFocusGroupProps["loop"]

orientation?RovingFocusGroupProps["orientation"]

rovingFocus?boolean

asChild?boolean

className?string

AttributeType

data-slot"toggle-group"

data-scope"toggle-group"

data-part"root"

data-disabled?string

data-focus?string

data-orientation?string

data-size?string

data-spacing?string

data-variant?string

CSS variableType

--gapstring

ToggleGroupItem

button

PropType

valuestring

asChild?boolean

className?string

AttributeType

data-slot"toggle-group-item"

data-scope"toggle-group"

data-part"item"

aria-checkedstring

aria-pressedstring

data-disabled?string

data-focus?string

data-orientationstring

data-ownedbystring

data-size?string

data-spacing?string

data-statestring

data-variant?string

type"button"