Toggle Group

A set of toggle buttons where one or more items can be pressed at a time.

export default function ToggleGroupHero() {
  return (
    <div className="flex flex-col items-center gap-3">
      <ToggleGroup>
        <ToggleGroupItem value="left" aria-label="Align left">
          <TextAlignLeftIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="Align center">
          <TextAlignCenterIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Align right">
          <TextAlignRightIcon />
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup itemVariant="outline" attached>
        <ToggleGroupItem value="left" aria-label="Align left">
          <TextAlignLeftIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="Align center">
          <TextAlignCenterIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Align right">
          <TextAlignRightIcon />
        </ToggleGroupItem>
      </ToggleGroup>
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add "https://ora-ui.com/r/toggle-group.json"

Usage

import { ToggleGroup, ToggleGroupItem } from '@/registry/ui/toggle-group';

<ToggleGroup>
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>;

Examples

Variants

The variant prop controls the visual style of each item.

export function ToggleGroupSoft() {
  return (
    <ToggleGroup>
      <ToggleGroupItem value="left" aria-label="Align left">
        <TextAlignLeftIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        <TextAlignCenterIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        <TextAlignRightIcon />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Connected

Set spacing={0} with variant="outline" to render items as a single connected control with shared borders.

export default function ToggleGroupConnected() {
  return (
    <ToggleGroup itemVariant="outline" attached>
      <ToggleGroupItem value="left" aria-label="Align left">
        <TextAlignLeftIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        <TextAlignCenterIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        <TextAlignRightIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="justify" aria-label="Align justify">
        <TextAlignJustifyIcon />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Vertical

Set orientation="vertical" to stack items in a column.

export default function ToggleGroupVertical() {
  return (
    <ToggleGroup orientation="vertical" itemVariant="outline" attached>
      <ToggleGroupItem value="bold" aria-label="Bold">
        <FontBoldIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Italic">
        <FontItalicIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Underline">
        <UnderlineIcon />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

API Reference

ToggleGroup

PropTypeDefault
variant"soft" | "outline" | "solid""soft"
size"sm" | "md" | "lg""md"
spacingnumber0
orientation"horizontal" | "vertical""horizontal"
classNamestring—

ToggleGroupItem

Inherits variant and size from the parent ToggleGroup context. Individual items can override either prop directly.

All other props are forwarded to the underlying Base UI Toggle primitive.