Toggle Group

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

Examples

Install the package, then import only the components a route uses. Exports are tree-shakable.

Install

pnpm add fractalsvelte

Import

<script lang="ts">
	import { ToggleGroup } from 'fractalsvelte';
</script>

<script lang="ts">
	import { ToggleGroup } from 'fractalsvelte';
</script>

<ToggleGroup type="multiple" items={items} />

Prop	Type	Default	Description
`items`	`Item[]`	`-`	The list of items to render.
`value`	`string[]`	`[]`	The selected value. Supports bind:.
`type`	`'single' \| 'multiple'`	`'single'`	Whether one or several items can be pressed.
`variant`	`'default' \| 'outline'`	`'default'`	The visual treatment.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	The control size.
`disabled`	`boolean`	`false`	Disables every item in the group.
`spacing`	`0 \| 4 \| 8 \| 16`	`0`	Gap between items in px. 0 joins them into one control.