Toggle Group

A set of two-state buttons that can be toggled on or off.

import { Bold, Italic, Underline } from "blode-icons-react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
export const ToggleGroupDemo = () => (
  <ToggleGroup multiple variant="outline">
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <Bold />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" value="italic">
      <Italic />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle strikethrough" value="strikethrough">
      <Underline />
    </ToggleGroupItem>
  </ToggleGroup>
);

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/toggle-group"

Usage

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

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

Examples

Default

import { Bold, Italic, Underline } from "blode-icons-react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
export const ToggleGroupDemo = () => (
  <ToggleGroup multiple variant="outline">
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <Bold />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" value="italic">
      <Italic />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle strikethrough" value="strikethrough">
      <Underline />
    </ToggleGroupItem>
  </ToggleGroup>
);

Outline

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
export const ToggleGroupOutline = () => (
  <ToggleGroup defaultValue={["all"]} variant="outline">
    <ToggleGroupItem aria-label="Toggle all" value="all">
      All
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle missed" value="missed">
      Missed
    </ToggleGroupItem>
  </ToggleGroup>
);

Single

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
export const ToggleGroupSizes = () => (
  <div className="flex flex-col gap-4">
    <ToggleGroup defaultValue={["top"]} size="sm" variant="outline">
      <ToggleGroupItem aria-label="Toggle top" value="top">
        Top
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle bottom" value="bottom">
        Bottom
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle left" value="left">
        Left
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle right" value="right">
        Right
      </ToggleGroupItem>
    </ToggleGroup>
    <ToggleGroup defaultValue={["top"]} variant="outline">
      <ToggleGroupItem aria-label="Toggle top" value="top">
        Top
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle bottom" value="bottom">
        Bottom
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle left" value="left">
        Left
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle right" value="right">
        Right
      </ToggleGroupItem>
    </ToggleGroup>
  </div>
);

Small

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
export const ToggleGroupSizes = () => (
  <div className="flex flex-col gap-4">
    <ToggleGroup defaultValue={["top"]} size="sm" variant="outline">
      <ToggleGroupItem aria-label="Toggle top" value="top">
        Top
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle bottom" value="bottom">
        Bottom
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle left" value="left">
        Left
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle right" value="right">
        Right
      </ToggleGroupItem>
    </ToggleGroup>
    <ToggleGroup defaultValue={["top"]} variant="outline">
      <ToggleGroupItem aria-label="Toggle top" value="top">
        Top
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle bottom" value="bottom">
        Bottom
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle left" value="left">
        Left
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle right" value="right">
        Right
      </ToggleGroupItem>
    </ToggleGroup>
  </div>
);

Large

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
export const ToggleGroupSizes = () => (
  <div className="flex flex-col gap-4">
    <ToggleGroup defaultValue={["top"]} size="sm" variant="outline">
      <ToggleGroupItem aria-label="Toggle top" value="top">
        Top
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle bottom" value="bottom">
        Bottom
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle left" value="left">
        Left
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle right" value="right">
        Right
      </ToggleGroupItem>
    </ToggleGroup>
    <ToggleGroup defaultValue={["top"]} variant="outline">
      <ToggleGroupItem aria-label="Toggle top" value="top">
        Top
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle bottom" value="bottom">
        Bottom
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle left" value="left">
        Left
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Toggle right" value="right">
        Right
      </ToggleGroupItem>
    </ToggleGroup>
  </div>
);

Disabled

import { Bold, Italic, Underline } from "blode-icons-react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
export const ToggleGroupDisabled = () => (
  <ToggleGroup disabled>
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <Bold />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" value="italic">
      <Italic />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle strikethrough" value="strikethrough">
      <Underline />
    </ToggleGroupItem>
  </ToggleGroup>
);

On This Page

Installation Usage Examples Default Outline Single Small Large Disabled