Form

ToggleGroup

Set of related Toggles bound to one value. Single-select acts as a radio group; multiple-select accumulates into an array.

Examples

type="single"

<ToggleGroup
  type="single"
  bind:value={align}
  options={[
    {value: 'left', label: 'Left'},
    {value: 'center', label: 'Center'},
    {value: 'right', label: 'Right'},
  ]}
/>

type="multiple"

<ToggleGroup
  type="multiple"
  bind:value={formats}
  variant="outline"
  options={[
    {value: 'bold', label: 'Bold'},
    {value: 'italic', label: 'Italic'},
    {value: 'underline', label: 'Underline'},
  ]}
/>

Props

Prop	Type	Default	Description
`options`	`{value, label, icon?, disabled?}[]`	`—`	Toggle definitions.
`type`	`'single' \| 'multiple'`	`'single'`	Single = radio behavior; multiple = checkbox behavior.
`value`	`T \| T[]`	`—`	Bindable value (string for single, string[] for multiple).
`onChange`	`(next: T \| T[]) => void`	`—`	Fires when selection changes.
`variant`	`'default' \| 'outline'`	`'default'`	Pass-through to Toggle.
`size`	`'sm' \| 'md'`	`'md'`	Pass-through to Toggle.

Install

CLI

npx @a3tai/mittsu add toggle-group