Components · Connected button group · Use

Connected button group

Single versus multiple selection is application behavior; the connected group has one Material visual construction.

State

Markup

<script lang="ts">
	import { ToggleGroup } from '@ark-ui/svelte';
</script>

<ToggleGroup.Root class="toggle-group-root" defaultValue={['grid']} aria-label="Layout">
	{#each ['list', 'grid', 'gallery'] as option (option)}
		<ToggleGroup.Item value={option} class="toggle-group-item">{option}</ToggleGroup.Item>
	{/each}
</ToggleGroup.Root>