Preview

Installation

Usage

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
<ToggleGroup>
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
  <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>

API Reference

ToggleGroup

Root component. Styled wrapper for ToggleGroup.Root from Base UI. Provides shared variant and size to child toggles via context.

ToggleGroupItem

Individual toggle button within the group. Styled wrapper for Toggle.Root from Base UI. Inherits variant and size from parent ToggleGroup context.

All props from Base UI ToggleGroup are also supported.

Examples

Small

Large

Ghost

Ungrouped

Vertical

Disabled