Beta
Animate UI

Toggle Group

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

Made by imskyleen

Installation

Usage

<ToggleGroup>
  <ToggleGroupItem>A</ToggleGroupItem>
  <ToggleGroupItem>B</ToggleGroupItem>
  <ToggleGroupItem>C</ToggleGroupItem>
</ToggleGroup>

Examples

Multiple

Props

Animate UI props

ToggleGroup

PropTypeDefault
size?
0
default
variant?
0
default
activeClassName?
string
-
transition?
Transition
{ type: 'spring', bounce: 0, stiffness: 200, damping: 25 }
type
0
-

ToggleGroupItem

PropTypeDefault
size?
0
default
variant?
0
default
spanProps?
React.HTMLAttributes<HTMLSpanElement>
-
buttonProps?
HTMLMotionProps<"button">
-
children
React.ReactNode
-

Credits

  • We use Radix UI for the toggle group component.
  • We take our inspiration from Shadcn UI for the toggle group style.

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

On this page