Toggle Group

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>
	);
}

<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>

Controlled

["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>
	);
}

["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>

Orientation

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

Horizontal

Vertical

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

export default function Orientation() {
	return (
		<div className="flex gap-4 flex-col sm:flex-row">
			<div>
				<p className="mb-2">Horizontal</p>
				<ToggleGroup defaultValue={['bold']} multiple orientation="horizontal">
					<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>
			</div>

			<div>
				<p className="mb-2">Vertical</p>
				<ToggleGroup defaultValue={['bold']} multiple orientation="vertical" className="flex-col">
					<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>
			</div>
		</div>
	);
}

Horizontal

Vertical

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

<div class="flex gap-4 flex-col sm:flex-row">
	<div>
		<p class="mb-2">Horizontal</p>
		<ToggleGroup defaultValue={['bold']} multiple orientation="horizontal">
			<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>
	</div>

	<div>
		<p class="mb-2">Vertical</p>
		<ToggleGroup defaultValue={['bold']} multiple orientation="vertical" class="flex-col">
			<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>
	</div>
</div>

Direction

Use the dir prop to change the text direction (LTR/RTL).

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

export default function Dir() {
	return (
		<ToggleGroup defaultValue={['bold']} multiple dir="rtl">
			<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>
	);
}

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

<ToggleGroup defaultValue={['bold']} multiple dir="rtl">
	<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>

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`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

RootProvider

Property	Default	Type
`value`	-	() => ToggleGroupApi<PropTypes>
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

RootContext

Property	Default	Type
`children`	-	Snippet<[() => ToggleGroupApi<PropTypes>]>

Item

Property	Default	Type
`value`	-	string
`disabled`	-	boolean \| undefined
`element`	-	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself