Toggle Group

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

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

Single

<ToggleGroup type="single" defaultValue="bold">
  <ToggleGroupHighlight>
    <ToggleGroupHighlightItem value="bold">
      <ToggleGroupItem value="bold" />
    </ToggleGroupHighlightItem>

    <ToggleGroupHighlightItem value="italic">
      <ToggleGroupItem value="italic" />
    </ToggleGroupHighlightItem>

    <ToggleGroupHighlightItem value="underline">
      <ToggleGroupItem value="underline" />
    </ToggleGroupHighlightItem>
  </ToggleGroupHighlight>
</ToggleGroup>

Multiple

<ToggleGroup type="multiple" defaultValue={['bold']}>
  <ToggleGroupHighlightItem value="bold">
    <ToggleGroupItem value="bold" />
  </ToggleGroupHighlightItem>

  <ToggleGroupHighlightItem value="italic">
    <ToggleGroupItem value="italic" />
  </ToggleGroupHighlightItem>

  <ToggleGroupHighlightItem value="underline">
    <ToggleGroupItem value="underline" />
  </ToggleGroupHighlightItem>
</ToggleGroup>

API Reference

ToggleGroup

Radix UI API Reference - ToggleGroup.Root

ToggleGroupItem

Radix UI API Reference - ToggleGroup.Item
PropTypeDefault
...props?
HTMLMotionProps<"button">
-

The asChild property is not supported in the ToggleGroupItem component, as it is used for animation.

ToggleGroupHighlight

Animate UI API Reference - Highlight
PropTypeDefault
transition?
Transition
{ type: "spring", stiffness: 200, damping: 25 }

ToggleGroupHighlightItem

Animate UI API Reference - HighlightItem
PropTypeDefault
...props?
HTMLMotionProps<"div">
-

Credits

Built by Skyleen. The source code is available on GitHub.

Last updated: 10/4/2025