---
title: Toggle Group
description: A set of toggle buttons that allows single or multiple selections.
links:
  doc: https://base-ui.com/react/components/toggle-group
  api: https://base-ui.com/react/components/toggle-group#api-reference
---

```tsx
'use client';

import {
  ToggleGroup,
  ToggleGroupItem,
} from '@/components/ui/toggle-group';
import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react';

export function ToggleGroupDefault() {
  return (
    <ToggleGroup aria-label='Text alignment'>
      <ToggleGroupItem value='left' aria-label='Align left'>
        <AlignLeft />
      </ToggleGroupItem>
      <ToggleGroupItem value='center' aria-label='Align center'>
        <AlignCenter />
      </ToggleGroupItem>
      <ToggleGroupItem value='right' aria-label='Align right'>
        <AlignRight />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}
```

## Installation

```bash
npx shadcn@latest add @fab-ui/toggle-group
```

**Install the following dependencies:**

```bash
npm install @base-ui/react
```

**Copy and paste the following code into your project.**

```tsx
'use client';

import * as React from 'react';

import { Toggle, toggleVariants } from '@/components/ui/toggle';
import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
import { type VariantProps } from 'class-variance-authority';

import { cn } from '@/lib/utils';

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants>
>({
  size: 'default',
  variant: 'default',
});

function ToggleGroup({
  className,
  variant,
  size,
  children,
  ...props
}: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants>) {
  return (
    <ToggleGroupPrimitive
      data-slot='toggle-group'
      data-variant={variant}
      data-size={size}
      className={cn(
        'flex gap-px rounded-md border border-border bg-[canvas] p-0.5',
        className
      )}
      {...props}
    >
      <ToggleGroupContext.Provider value={{ variant, size }}>
        {children}
      </ToggleGroupContext.Provider>
    </ToggleGroupPrimitive>
  );
}

function ToggleGroupItem({
  className,
  children,
  variant,
  size,
  ...props
}: React.ComponentProps<typeof Toggle> & VariantProps<typeof toggleVariants>) {
  const context = React.useContext(ToggleGroupContext);

  return (
    <Toggle
      data-slot='toggle-group-item'
      data-variant={context.variant || variant}
      data-size={context.size || size}
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
        className
      )}
      {...props}
    >
      {children}
    </Toggle>
  );
}

export { ToggleGroup, ToggleGroupItem };
```

**Update the import paths to match your project setup.**

## Usage

```tsx
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
```

```tsx
<ToggleGroup defaultValue="center">
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>
```

## Examples

### Multiple

Use `multiple` to allow multiple items to be selected.

```tsx
'use client';

import {
  ToggleGroup,
  ToggleGroupItem,
} from '@/components/ui/toggle-group';
import { Bold, Italic, Underline } from 'lucide-react';

export function ToggleGroupMultiple() {
  return (
    <ToggleGroup multiple aria-label='Text formatting'>
      <ToggleGroupItem value='bold' aria-label='Toggle bold'>
        <Bold />
      </ToggleGroupItem>
      <ToggleGroupItem value='italic' aria-label='Toggle italic'>
        <Italic />
      </ToggleGroupItem>
      <ToggleGroupItem value='underline' aria-label='Toggle underline'>
        <Underline />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}
```