Toggle Group

Provides a shared state to a series of toggle buttons.

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

<ToggleGroup defaultValue={['bold']}>
  <Toggle value="bold" />
  <Toggle value="italic" />
  <Toggle value="underline" />
</ToggleGroup>

API Reference

ToggleGroup

Animate UI API Reference - ToggleGroupBase UI API Reference - ToggleGroup
PropTypeDefault
variant?
"default" | "outline"
-
size?
"default" | "sm" | "lg" | "icon"
-

Toggle

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

The render property is not supported in the Toggle component, as it is used for animation.

Credits

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

Last updated: 10/4/2025