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

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Toggle Group

Controlled

Orientation

Direction

API Reference

Root

RootProvider

RootContext

Item