eo-n/ui
DocsComponents

Toggle Group

PreviousNext

Groups multiple toggles for combined or independent control.

Docs
import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
 
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";
 
export function ToggleGroupDemo() {
  return (
    <ToggleGroup variant="outline">
      <ToggleGroupItem value="left" aria-label="Toggle left">
        <AlignLeft />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Toggle center">
        <AlignCenter />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Toggle right">
        <AlignRight />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Installation

npx shadcn@latest add "https://eo-n.vercel.app/r/toggle-group"

Usage

Import all parts and piece them together.

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
<ToggleGroup>
  <ToggleGroupItem value="1">Option 1</ToggleGroupItem>
  <ToggleGroupItem value="2">Option 2</ToggleGroupItem>
  <ToggleGroupItem value="3">Option 3</ToggleGroupItem>
</ToggleGroup>

Examples

Default

import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
 
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";
 
export function ToggleGroupDemo() {
  return (
    <ToggleGroup variant="outline">
      <ToggleGroupItem value="left" aria-label="Toggle left">
        <AlignLeft />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Toggle center">
        <AlignCenter />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Toggle right">
        <AlignRight />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Vertical Orientation

import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
 
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";
 
export function ToggleGroupVertical() {
  return (
    <ToggleGroup variant="outline" orientation="vertical">
      <ToggleGroupItem value="left" aria-label="Toggle left">
        <AlignLeft />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Toggle center">
        <AlignCenter />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Toggle right">
        <AlignRight />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Outline

import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
 
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";
 
export function ToggleGroupOutline() {
  return (
    <ToggleGroup variant="outline">
      <ToggleGroupItem value="left" aria-label="Toggle left">
        <AlignLeft />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Toggle center">
        <AlignCenter />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Toggle right">
        <AlignRight />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Multiple

import { Bold, Italic, Underline } from "lucide-react";
 
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";
 
export function ToggleGroupMultiple() {
  return (
    <ToggleGroup toggleMultiple>
      <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>
  );
}

Large

import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
 
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";
 
export function ToggleGroupLarge() {
  return (
    <ToggleGroup size="lg">
      <ToggleGroupItem value="left" aria-label="Toggle left">
        <AlignLeft />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Toggle center">
        <AlignCenter />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Toggle right">
        <AlignRight />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Small

import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
 
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";
 
export function ToggleGroupSmall() {
  return (
    <ToggleGroup size="sm">
      <ToggleGroupItem value="left" aria-label="Toggle left">
        <AlignLeft />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Toggle center">
        <AlignCenter />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Toggle right">
        <AlignRight />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Disabled

import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
 
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";
 
export function ToggleGroupDisabled() {
  return (
    <ToggleGroup disabled variant="outline">
      <ToggleGroupItem value="left" aria-label="Toggle left">
        <AlignLeft />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Toggle center">
        <AlignCenter />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Toggle right">
        <AlignRight />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Toast

Briefly displays transient messages or notifications.

Toggle

Switches between two states when clicked.