Toggle Group

Forms

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

Import

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

A toggle group where only one item can be selected.

A toggle group where multiple items can be selected.

Toggle group with outline style.

Different sizes for toggle groups.

type*—

"single" | "multiple"

Whether one or multiple items can be pressed

value—

string | string[]

The controlled value of the item(s) to press

defaultValue—

string | string[]

The default value of the item(s) to press

onValueChange—

(value: string | string[]) => void

Event handler for value change

variant"default"

"default" | "outline"

The visual style of the toggles

size"default"

"default" | "sm" | "lg"

The size of the toggles

disabledfalse

boolean

Whether the toggle group is disabled

Prop	Type	Default	Description
`type*`	`"single" \| "multiple"`	—	Whether one or multiple items can be pressed
`value`	`string \| string[]`	—	The controlled value of the item(s) to press
`defaultValue`	`string \| string[]`	—	The default value of the item(s) to press
`onValueChange`	`(value: string \| string[]) => void`	—	Event handler for value change
`variant`	`"default" \| "outline"`	"default"	The visual style of the toggles
`size`	`"default" \| "sm" \| "lg"`	"default"	The size of the toggles
`disabled`	`boolean`	false	Whether the toggle group is disabled