Animate UI

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

<ToggleGroup type="single" defaultValue="bold">
  <ToggleGroupItem value="bold" />
  <ToggleGroupItem value="italic" />
  <ToggleGroupItem value="underline" />
</ToggleGroup>

API Reference

ToggleGroup

Animate UI API Reference - ToggleGroup PrimitiveRadix UI API Reference - ToggleGroup.Root
PropTypeDefault
variant?
"default" | "outline"
-
size?
"default" | "sm" | "lg" | "icon"
-
...props?
HTMLMotionProps<"button">
-

ToggleGroupItem

Animate UI API Reference - ToggleGroupItem PrimitiveRadix UI API Reference - ToggleGroup.Item
PropTypeDefault
variant?
"default" | "outline"
-
size?
"default" | "sm" | "lg" | "icon"
-
...props?
HTMLMotionProps<"button">
-

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

Credits

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