Toggle Group

A set of toggles that behave as one control — pick one alignment, or any combination of formatting marks. Arrow keys move between the items.

tsx

1import { ToggleGroup, ToggleGroupItem } from "@pestoui/core"

Single select

type="single" allows one pressed item at a time. variant and size set on the group reach every item.

type="multiple" lets any number be pressed. spacing={0} joins the items into one segmented control.

Prop	Type	Default	Description
type	"single" \| "multiple"	—	Required. One pressed item at a time, or any number.
value / defaultValue	string \| string[]	—	A string for single, an array for multiple.
onValueChange	(value: string \| string[]) => void	—	Fires with the new selection. In single mode it is an empty string when the pressed item is released.
variant	"default" \| "outline"	"default"	Passed down to every item.
size	"sm" \| "default" \| "lg"	"default"	Passed down to every item.
spacing	number	2	Gap between items on the spacing scale. 0 joins them and squares the inner corners.
orientation	"horizontal" \| "vertical"	"horizontal"	Lays the items out in a row or a column and sets which arrow keys move focus.
value	string	—	On ToggleGroupItem. Required. The item's identity in the group's value.

Pesto UI · 117 documented components