Toggle Group

Provides a shared state to a series of toggle buttons.

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

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

export default function ToggleGroupDemo() {
  return (
    <ToggleGroup defaultValue={["bold"]}>
      <Toggle value="bold" aria-label="Toggle bold">
        <BoldIcon />
      </Toggle>
      <Toggle value="italic" aria-label="Toggle italic">
        <ItalicIcon />
      </Toggle>
      <Toggle value="underline" aria-label="Toggle underline">
        <UnderlineIcon />
      </Toggle>
    </ToggleGroup>
  )
}

Installation

npx love-ui@latest add toggle-group

Usage

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

<ToggleGroup>
  <Toggle>Bold</Toggle>
  <Toggle>Italic</Toggle>
  <Toggle>Underline</Toggle>
</ToggleGroup>

Examples

Small Toggles

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

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

export default function ToggleGroupSm() {
  return (
    <ToggleGroup size="sm" defaultValue={["bold"]}>
      <Toggle value="bold" aria-label="Toggle bold">
        <BoldIcon />
      </Toggle>
      <Toggle value="italic" aria-label="Toggle italic">
        <ItalicIcon />
      </Toggle>
      <Toggle value="underline" aria-label="Toggle underline">
        <UnderlineIcon />
      </Toggle>
    </ToggleGroup>
  )
}

Large Toggles

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

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

export default function ToggleGroupLg() {
  return (
    <ToggleGroup size="lg" defaultValue={["bold"]}>
      <Toggle value="bold" aria-label="Toggle bold">
        <BoldIcon />
      </Toggle>
      <Toggle value="italic" aria-label="Toggle italic">
        <ItalicIcon />
      </Toggle>
      <Toggle value="underline" aria-label="Toggle underline">
        <UnderlineIcon />
      </Toggle>
    </ToggleGroup>
  )
}

With Outline Toggles

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

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

export default function ToggleGroupOutline() {
  return (
    <ToggleGroup variant="outline" defaultValue={["bold"]}>
      <Toggle value="bold" aria-label="Toggle bold">
        <BoldIcon />
      </Toggle>
      <Toggle value="italic" aria-label="Toggle italic">
        <ItalicIcon />
      </Toggle>
      <Toggle value="underline" aria-label="Toggle underline">
        <UnderlineIcon />
      </Toggle>
    </ToggleGroup>
  )
}

With Outline and Separator

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

import {
  Toggle,
  ToggleGroup,
  ToggleGroupSeparator,
} from "@/components/ui/toggle-group"

export default function ToggleGroupOutlineWithSeparator() {
  return (
    <ToggleGroup variant="outline" defaultValue={["bold"]}>
      <Toggle value="bold" aria-label="Toggle bold">
        <BoldIcon />
      </Toggle>
      <ToggleGroupSeparator />
      <Toggle value="italic" aria-label="Toggle italic">
        <ItalicIcon />
      </Toggle>
      <ToggleGroupSeparator />
      <Toggle value="underline" aria-label="Toggle underline">
        <UnderlineIcon />
      </Toggle>
    </ToggleGroup>
  )
}

Disabled

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

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

export default function ToggleGroupDisabled() {
  return (
    <ToggleGroup defaultValue={["bold"]} disabled>
      <Toggle value="bold" aria-label="Toggle bold">
        <BoldIcon />
      </Toggle>
      <Toggle value="italic" aria-label="Toggle italic">
        <ItalicIcon />
      </Toggle>
      <Toggle value="underline" aria-label="Toggle underline">
        <UnderlineIcon />
      </Toggle>
    </ToggleGroup>
  )
}

With Disabled Toggle

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

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

export default function ToggleGroupWithDisabledItem() {
  return (
    <ToggleGroup defaultValue={["bold"]}>
      <Toggle value="bold" aria-label="Toggle bold">
        <BoldIcon />
      </Toggle>
      <Toggle value="italic" aria-label="Toggle italic" disabled>
        <ItalicIcon />
      </Toggle>
      <Toggle value="underline" aria-label="Toggle underline">
        <UnderlineIcon />
      </Toggle>
    </ToggleGroup>
  )
}

Multiple selection

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

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

export default function ToggleGroupMultiple() {
  return (
    <ToggleGroup defaultValue={["bold"]} multiple>
      <Toggle value="bold" aria-label="Toggle bold">
        <BoldIcon />
      </Toggle>
      <Toggle value="italic" aria-label="Toggle italic">
        <ItalicIcon />
      </Toggle>
      <Toggle value="underline" aria-label="Toggle underline">
        <UnderlineIcon />
      </Toggle>
    </ToggleGroup>
  )
}

With Tooltips

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

import { Toggle, ToggleGroup } from "@/components/ui/toggle-group"
import {
  Tooltip,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export default function TooltipDemo() {
  return (
    <TooltipProvider>
      <ToggleGroup defaultValue={["bold"]} multiple>
        <Tooltip>
          <TooltipTrigger
            render={<Toggle value="bold" aria-label="Toggle bold" />}
          >
            <BoldIcon />
          </TooltipTrigger>
          <TooltipPopup>Bold</TooltipPopup>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger
            render={<Toggle value="italic" aria-label="Toggle italic" />}
          >
            <ItalicIcon />
          </TooltipTrigger>
          <TooltipPopup>Italic</TooltipPopup>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger
            render={<Toggle value="underline" aria-label="Toggle underline" />}
          >
            <UnderlineIcon />
          </TooltipTrigger>
          <TooltipPopup>Underline</TooltipPopup>
        </Tooltip>
      </ToggleGroup>
    </TooltipProvider>
  )
}

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with loveui quickly.

Prop Mapping

Component	Radix UI Prop	Base UI Prop
`ToggleGroup`	`type` (enum, `"single"` or `"multiple"`)	`multiple` (boolean, default: `false`)

Quick Checklist

Replace type="multiple" → multiple on ToggleGroup
Remove type="single" from ToggleGroup
Always use arrays for defaultValue
Use Toggle going forward; ToggleGroupItem remains for legacy

Additional Notes

loveui toggle group sizes are more compact compared to shadcn/ui, making them better suited for dense applications:

Size	Height (shadcn/ui)	Height (loveui)
`sm`	32px	28px
`default`	36px	32px
`lg`	-	36px

So, for example, if you were using the default size in shadcn/ui and you want to preserve the original height, you should use the lg size in loveui.

Comparison Examples

shadcn/ui

<ToggleGroup type="multiple" defaultValue={["bold"]}>
  <ToggleGroupItem value="bold">B</ToggleGroupItem>
  <ToggleGroupItem value="italic">I</ToggleGroupItem>
  <ToggleGroupItem value="underline">U</ToggleGroupItem>
</ToggleGroup>

loveui

<ToggleGroup multiple defaultValue={["bold"]}>
  <Toggle value="bold">B</Toggle>
  <Toggle value="italic">I</Toggle>
  <Toggle value="underline">U</Toggle>
</ToggleGroup>

Toggle Toolbar