Toggle Group

type

Installation

Usage

Single

<ToggleGroup type="single" defaultValue="bold">
  <ToggleGroupHighlight>
    <ToggleGroupHighlightItem value="bold">
      <ToggleGroupItem value="bold" />
    </ToggleGroupHighlightItem>

    <ToggleGroupHighlightItem value="italic">
      <ToggleGroupItem value="italic" />
    </ToggleGroupHighlightItem>

    <ToggleGroupHighlightItem value="underline">
      <ToggleGroupItem value="underline" />
    </ToggleGroupHighlightItem>
  </ToggleGroupHighlight>
</ToggleGroup>

Multiple

<ToggleGroup type="multiple" defaultValue={['bold']}>
  <ToggleGroupHighlightItem value="bold">
    <ToggleGroupItem value="bold" />
  </ToggleGroupHighlightItem>

  <ToggleGroupHighlightItem value="italic">
    <ToggleGroupItem value="italic" />
  </ToggleGroupHighlightItem>

  <ToggleGroupHighlightItem value="underline">
    <ToggleGroupItem value="underline" />
  </ToggleGroupHighlightItem>
</ToggleGroup>

API Reference

ToggleGroup

Radix UI API Reference - ToggleGroup.Root

ToggleGroupItem

Radix UI API Reference - ToggleGroup.Item

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

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

ToggleGroupHighlight

Animate UI API Reference - Highlight

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

ToggleGroupHighlightItem

Animate UI API Reference - HighlightItem

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

Credits

Radix UI Toggle Group

Toggle Group

On this page