Animate UI

Toggle Group

Provides a shared state to a series of toggle buttons.

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

Single

<ToggleGroup defaultValue={['bold']}>
  <ToggleGroupHighlight>
    <ToggleHighlight value="bold">
      <Toggle value="bold" />
    </ToggleHighlight>

    <ToggleHighlight value="italic">
      <Toggle value="italic" />
    </ToggleHighlight>

    <ToggleHighlight value="underline">
      <Toggle value="underline" />
    </ToggleHighlight>
  </ToggleGroupHighlight>
</ToggleGroup>

Multiple

<ToggleGroup toggleMultiple defaultValue={['bold']}>
  <ToggleHighlight value="bold">
    <Toggle value="bold" />
  </ToggleHighlight>

  <ToggleHighlight value="italic">
    <Toggle value="italic" />
  </ToggleHighlight>

  <ToggleHighlight value="underline">
    <Toggle value="underline" />
  </ToggleHighlight>
</ToggleGroup>

API Reference

ToggleGroup

Base UI API Reference - ToggleGroup

Toggle

Base UI API Reference - Toggle
PropTypeDefault
...props?
HTMLMotionProps<"button">
-

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

ToggleGroupHighlight

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

ToggleHighlight

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

Credits

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