ToggleGroup

A group of toggle buttons where one or more can be selected. Built on bits-ui. Uses ToggleGroup.Root and ToggleGroup.Item.

Example

Selected: center

Props

ToggleGroup.Root

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	Selection mode
`value`	`string \| string[]`	`'' \| []`	Selected value(s) (bindable)
`onValueChange`	`(value: string \| string[]) => void`	—	Callback when selection changes
`disabled`	`boolean`	`false`	Disable all items
`children`	`Snippet`	—	ToggleGroup.Item elements
`class`	`string`	—	Additional CSS classes

ToggleGroup.Item

Prop	Type	Default	Description
`value`	`string`	—	Item value (required)
`disabled`	`boolean`	`false`	Disable this item
`children`	`Snippet`	—	Item content
`class`	`string`	—	Additional CSS classes

Usage

<script>
  import { ToggleGroup } from '@chrissnell/chonky-ui';
  let align = $state('left');
</script>

<ToggleGroup.Root type="single" bind:value={align}>
  <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
  <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
  <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
</ToggleGroup.Root>