Toggle Group

tsx

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

svelte

<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

Use the value and onValueChange props to control state programmatically.

You selected bold

tsx

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>

			{/* Message */}
			<p>
				<span className="opacity-60">You selected</span> <code className="code">{value.length > 0 ? value.join(', ') : 'none'}</code>
			</p>
		</div>
	);
}

You selected bold

svelte

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

	<!-- Message -->
	<p><span class="opacity-60">You selected</span> <code class="code">{value.length > 0 ? value.join(', ') : 'none'}</code></p>
</div>

Orientation

Using the orientation prop to control the layout.

Horizontal

Vertical

tsx

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

export default function Orientation() {
	return (
		<div className="flex flex-col items-center gap-4">
			<p>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>

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

Horizontal

Vertical

svelte

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

<div class="flex flex-col items-center gap-4">
	<p>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>

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

Direction

Set the text direction (ltr or rtl) using the dir prop.

tsx

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

svelte

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

Anatomy

Here’s an overview of how the ToggleGroup component is structured in code:

tsx

import { ToggleGroup } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<ToggleGroup>
			<ToggleGroup.Item />
		</ToggleGroup>
	);
}

API Reference

Root

Prop	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

Provider

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

Context

Prop	Default	Type
`children`	—	(togglegroup: ToggleGroupApi<PropTypes>) => ReactNode

Item

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

Root

Prop	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

Provider

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

Context

Prop	Default	Type
`children`	—	Snippet<[() => ToggleGroupApi<PropTypes>]>

Item

Prop	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

Controlled

Orientation

Direction

Anatomy

API Reference

Root

Provider

Context

Item

Root

Provider

Context

Item