Toggle Group

A segmented control. In single mode the indicator glides between items with a shared layout animation.

InputsRadix Toggle Group

Playground

Tweak the props, the preview and the code follow.

Props

type

variant

size

disabled

<ToggleGroup type="single" defaultValue={"left"}>
  <ToggleGroupItem value="left" aria-label="Align left">
    <AlignLeft />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <AlignCenter />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <AlignRight />
  </ToggleGroupItem>
</ToggleGroup>

Installation

npx @plumsydev/plum-ui add toggle-group

Usage

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

<ToggleGroup type="single" defaultValue="week">
  <ToggleGroupItem value="day">Day</ToggleGroupItem>
  <ToggleGroupItem value="week">Week</ToggleGroupItem>
</ToggleGroup>

Examples

Variants

outline and ghost variants, with icons and sizes.

Multiple

With type="multiple" each active item fades its own background in.

API Reference

ToggleGroup

Extends Radix ToggleGroup.Root.

Prop	Type	Default
`type*` Selection mode.	`"single" \| "multiple"`	`—`
`variant` Container style.	`"default" \| "outline" \| "ghost"`	`"default"`
`size` Item height.	`"sm" \| "default" \| "lg"`	`"default"`
`value / defaultValue` Controlled or initial value (array in multiple mode).	`string \| string[]`	`—`
`onValueChange` Called when the selection changes.	`(value: string \| string[]) => void`	`—`

ToggleGroupItem

Prop	Type	Default
`value*` The item value.	`string`	`—`

Notes

Each group scopes its layoutId with useId(), so several groups on one page never fight over the indicator.

PreviousToggle NextTooltip