Toggle Group

A set of two-state buttons where one or several can be toggled on at once. Use type="single" for mutually exclusive choices (text alignment, a view mode) and type="multiple" for independent toggles (bold/italic/underline). Anatomy: ToggleGroup (the bordered container that owns the value) wraps one or more ToggleGroupItem children, each identified by its value.

Single choice

type="single" binds value to one string. The track is a field, not a card — the same well shape an Input has — so the chosen item steps off the well it sits in rather than off whatever is behind the whole control.

<ToggleGroup type="single" value="left">
	<ToggleGroupItem value="left"><AlignLeft size={16} /></ToggleGroupItem>
	<ToggleGroupItem value="center"><AlignCenter size={16} /></ToggleGroupItem>
	<ToggleGroupItem value="right"><AlignRight size={16} /></ToggleGroupItem>
</ToggleGroup>

Multiple

type="multiple" binds value to an array and lets several items stay on at once — independent formatting toggles rather than one setting with several answers.

<ToggleGroup type="multiple" value={['left', 'right']}>
	<ToggleGroupItem value="left"><AlignLeft size={16} /></ToggleGroupItem>
	<ToggleGroupItem value="center"><AlignCenter size={16} /></ToggleGroupItem>
	<ToggleGroupItem value="right"><AlignRight size={16} /></ToggleGroupItem>
</ToggleGroup>

Labels

Items take text as readily as glyphs. A range picker or a view switcher reads better with words, and a glyph paired with its label needs no tooltip to be understood.

<ToggleGroup type="single" value="daily">
	<ToggleGroupItem value="daily">Daily</ToggleGroupItem>
	<ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
	<ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
</ToggleGroup>

<ToggleGroup type="single" value="grid">
	<ToggleGroupItem value="grid">
		<span class="flex items-center gap-1.5"><LayoutGrid size={16} /> Grid</span>
	</ToggleGroupItem>
	<ToggleGroupItem value="list">
		<span class="flex items-center gap-1.5"><List size={16} /> List</span>
	</ToggleGroupItem>
</ToggleGroup>

Disabled

A single item opts out with its own disabled; disabled on the group dims every item at once.

<ToggleGroup type="single" value="center">
	<ToggleGroupItem value="left"><AlignLeft size={16} /></ToggleGroupItem>
	<ToggleGroupItem value="center"><AlignCenter size={16} /></ToggleGroupItem>
	<ToggleGroupItem value="right" disabled><AlignRight size={16} /></ToggleGroupItem>
</ToggleGroup>

<ToggleGroup type="single" value="center" disabled>
	<ToggleGroupItem value="left"><AlignLeft size={16} /></ToggleGroupItem>
	<ToggleGroupItem value="center"><AlignCenter size={16} /></ToggleGroupItem>
	<ToggleGroupItem value="right"><AlignRight size={16} /></ToggleGroupItem>
</ToggleGroup>

API

`ToggleGroup`

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		The `ToggleGroupItem`s.
`value` bindable	`string\|string[]`		The active item(s). A string in `single` mode or an array of strings in `multiple` mode. Bindable.
`type`	`'single'\|'multiple'`	`'single'`	Selection mode. `single` allows one active item and binds `value` to a string; `multiple` allows several and binds `value` to an array.
`class`	`string`		Additional Tailwind classes merged onto the container element.
`disabled`	`boolean`		Disables the entire group and every item within it (forwarded via `...rest`).

`ToggleGroupItem`

A single toggle button within a ToggleGroup, identified by its value.

Prop	Type	Description
`children` required	`import('svelte').Snippet`	Item content (text, icon, or both).
`value` required	`string`	Identifies this item within the group's `value`.
`class`	`string`	Additional Tailwind classes merged onto the item.
`disabled`	`boolean`	Disables this item independently of the group (forwarded via `...rest`).