Toggle group

.toggle-group shares radii like a button group. Multiple-press is independent aria-pressed. One-at-a-time is a single $state value. data-orientation="vertical" stacks the items. There is no wrapper.

Several at once

One at a time

<script>
	let marks = $state({ bold: true, italic: false, underline: false });
	let align = $state('start');

	function flip(key) {
		marks = { ...marks, [key]: !marks[key] };
	}
</script>

<div class="toggle-group">
	<button class="toggle toggle-outline" type="button" aria-pressed={marks.bold} aria-label="Bold" onclick={() => flip('bold')}>B</button>
	<button class="toggle toggle-outline" type="button" aria-pressed={marks.italic} aria-label="Italic" onclick={() => flip('italic')}>I</button>
	<button class="toggle toggle-outline" type="button" aria-pressed={marks.underline} aria-label="Underline" onclick={() => flip('underline')}>U</button>
</div>

<div class="toggle-group" role="group" aria-label="Align">
	<button class="toggle toggle-outline" type="button" aria-pressed={align === 'start'} onclick={() => align = 'start'}>Start</button>
	<button class="toggle toggle-outline" type="button" aria-pressed={align === 'middle'} onclick={() => align = 'middle'}>Middle</button>
	<button class="toggle toggle-outline" type="button" aria-pressed={align === 'end'} onclick={() => align = 'end'}>End</button>
</div>