Toggle Group

<script lang="ts">
	import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/svelte';
	import { ToggleGroup } from '@skeletonlabs/skeleton-svelte';
</script>

<ToggleGroup defaultValue={['bold']} multiple>
	<ToggleGroup.Item value="bold">
		<BoldIcon class="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic">
		<ItalicIcon class="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="underline">
		<UnderlineIcon class="size-4" />
	</ToggleGroup.Item>
</ToggleGroup>

import { ToggleGroup } from '@skeletonlabs/skeleton-react';
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';

export default function Default() {
	return (
		<ToggleGroup defaultValue={['bold']} multiple>
			<ToggleGroup.Item value="bold">
				<BoldIcon className="size-4" />
			</ToggleGroup.Item>
			<ToggleGroup.Item value="italic">
				<ItalicIcon className="size-4" />
			</ToggleGroup.Item>
			<ToggleGroup.Item value="underline">
				<UnderlineIcon className="size-4" />
			</ToggleGroup.Item>
		</ToggleGroup>
	);
}

Controlled

["bold"]

<script lang="ts">
	import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/svelte';
	import { ToggleGroup } from '@skeletonlabs/skeleton-svelte';

	let value = $state(['bold']);
</script>

<div class="flex flex-col items-center gap-4">
	<ToggleGroup {value} onValueChange={(details) => (value = details.value)} multiple>
		<ToggleGroup.Item value="bold">
			<BoldIcon class="size-4" />
		</ToggleGroup.Item>
		<ToggleGroup.Item value="italic">
			<ItalicIcon class="size-4" />
		</ToggleGroup.Item>
		<ToggleGroup.Item value="underline">
			<UnderlineIcon class="size-4" />
		</ToggleGroup.Item>
	</ToggleGroup>
	<pre class="pre">{JSON.stringify(value)}</pre>
</div>

["bold"]

import { ToggleGroup } from '@skeletonlabs/skeleton-react';
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';
import { useState } from 'react';

export default function Controlled() {
	const [value, setValue] = useState(['bold']);

	return (
		<div className="flex flex-col items-center gap-4">
			<ToggleGroup value={value} onValueChange={(details) => setValue(details.value)} multiple>
				<ToggleGroup.Item value="bold">
					<BoldIcon className="size-4" />
				</ToggleGroup.Item>
				<ToggleGroup.Item value="italic">
					<ItalicIcon className="size-4" />
				</ToggleGroup.Item>
				<ToggleGroup.Item value="underline">
					<UnderlineIcon className="size-4" />
				</ToggleGroup.Item>
			</ToggleGroup>
			<pre className="pre">{JSON.stringify(value)}</pre>
		</div>
	);
}

Orientation

Use the orientation prop to change the layout direction of the Toggle Group.

["bold"]

<script lang="ts">
	import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/svelte';
	import { ToggleGroup } from '@skeletonlabs/skeleton-svelte';

	let value = $state(['bold']);
</script>

<div class="flex flex-col items-center gap-4">
	<ToggleGroup {value} onValueChange={(details) => (value = details.value)} multiple>
		<ToggleGroup.Item value="bold">
			<BoldIcon class="size-4" />
		</ToggleGroup.Item>
		<ToggleGroup.Item value="italic">
			<ItalicIcon class="size-4" />
		</ToggleGroup.Item>
		<ToggleGroup.Item value="underline">
			<UnderlineIcon class="size-4" />
		</ToggleGroup.Item>
	</ToggleGroup>
	<pre class="pre">{JSON.stringify(value)}</pre>
</div>

API Reference

Root

Property	Default	Type
`ids`	-	Partial<{ root: string; item: (value: string) => string; }> \| undefined The ids of the elements in the toggle. Useful for composition.
`disabled`	-	boolean \| undefined Whether the toggle is disabled.
`value`	-	string[] \| undefined The controlled selected value of the toggle group.
`defaultValue`	-	string[] \| undefined The initial selected value of the toggle group when rendered. Use when you don't need to control the selected value of the toggle group.
`onValueChange`	-	((details: ValueChangeDetails) => void) \| undefined Function to call when the toggle is clicked.
`loopFocus`	true	boolean \| undefined Whether to loop focus inside the toggle group.
`rovingFocus`	true	boolean \| undefined Whether to use roving tab index to manage focus.
`orientation`	"horizontal"	Orientation \| undefined The orientation of the toggle group.
`multiple`	-	boolean \| undefined Whether to allow multiple toggles to be selected.
`deselectable`	true	boolean \| undefined Whether the toggle group allows empty selection. Note: This is ignored if `multiple` is `true`.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	-	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	-	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

RootProvider

Property	Default	Type
`value`	-	ToggleGroupApi<PropTypes>
`element`	-	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

RootContext

Property	Default	Type
`children`	-	(togglegroup: ToggleGroupApi<PropTypes>) => ReactNode

Item

Property	Default	Type
`value`	-	string
`disabled`	-	boolean \| undefined
`element`	-	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself