Toggle Group

toggleMultiple

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

Prop	Type	Default
`...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

Prop	Type	Default
`transition?`	`Transition`	`{ type: "spring", stiffness: 200, damping: 25 }`

ToggleHighlight

Animate UI API Reference - HighlightItem

Prop	Type	Default
`...props?`	`HTMLMotionProps<"div">`	-

Credits

Base UI Toggle Group

Toggle Group

On this page