8.0k New

Toggle Group

Previous Next

A set of two-state buttons that can be toggled on or off.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor 
<script lang="ts">
	import BoldIcon from "@lucide/svelte/icons/bold";
	import ItalicIcon from "@lucide/svelte/icons/italic";
	import UnderlineIcon from "@lucide/svelte/icons/underline";
	import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
 
<ToggleGroup.Root variant="outline" type="multiple">
	<ToggleGroup.Item value="bold" aria-label="Toggle bold">
		<BoldIcon />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic" aria-label="Toggle italic">
		<ItalicIcon />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
		<UnderlineIcon />
	</ToggleGroup.Item>
</ToggleGroup.Root>

Installation 

pnpm dlx shadcn-svelte@latest add toggle-group

Usage 

<script lang="ts">
  import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root type="single">
  <ToggleGroup.Item value="a">A</ToggleGroup.Item>
  <ToggleGroup.Item value="b">B</ToggleGroup.Item>
  <ToggleGroup.Item value="c">C</ToggleGroup.Item>
</ToggleGroup.Root>

Outline

Use variant="outline" for an outline style.

<script lang="ts">
	import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
 
<ToggleGroup.Root variant="outline" type="single" value="all">
	<ToggleGroup.Item value="all" aria-label="Toggle all">All</ToggleGroup.Item>
	<ToggleGroup.Item value="missed" aria-label="Toggle missed">Missed</ToggleGroup.Item>
</ToggleGroup.Root>

Size

Use the size prop to change the size of the toggle group.

<script lang="ts">
	import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
 
	const sides = ["top", "bottom", "left", "right"] as const;
</script>
 
<div class="flex flex-col gap-4">
	<ToggleGroup.Root type="single" size="sm" value="top" variant="outline">
		{#each sides as side (side)}
			<ToggleGroup.Item value={side} aria-label="Toggle {side}" class="capitalize">
				{side}
			</ToggleGroup.Item>
		{/each}
	</ToggleGroup.Root>
	<ToggleGroup.Root type="single" value="top" variant="outline">
		{#each sides as side (side)}
			<ToggleGroup.Item value={side} aria-label="Toggle {side}" class="capitalize">
				{side}
			</ToggleGroup.Item>
		{/each}
	</ToggleGroup.Root>
</div>

Spacing

Use spacing to add spacing between toggle group items.

<script lang="ts">
	import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
 
	const sides = ["top", "bottom", "left", "right"] as const;
</script>
 
<ToggleGroup.Root type="single" size="sm" value="top" variant="outline" spacing={2}>
	{#each sides as side (side)}
		<ToggleGroup.Item value={side} aria-label="Toggle {side}" class="capitalize">
			{side}
		</ToggleGroup.Item>
	{/each}
</ToggleGroup.Root>

Vertical

Use orientation="vertical" for vertical toggle groups.

<script lang="ts">
	import BoldIcon from "@lucide/svelte/icons/bold";
	import ItalicIcon from "@lucide/svelte/icons/italic";
	import UnderlineIcon from "@lucide/svelte/icons/underline";
	import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
 
<ToggleGroup.Root type="multiple" orientation="vertical" spacing={1} value={["bold", "italic"]}>
	<ToggleGroup.Item value="bold" aria-label="Toggle bold">
		<BoldIcon />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic" aria-label="Toggle italic">
		<ItalicIcon />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="underline" aria-label="Toggle underline">
		<UnderlineIcon />
	</ToggleGroup.Item>
</ToggleGroup.Root>

Disabled 

<script lang="ts">
	import BoldIcon from "@lucide/svelte/icons/bold";
	import ItalicIcon from "@lucide/svelte/icons/italic";
	import UnderlineIcon from "@lucide/svelte/icons/underline";
	import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
 
<ToggleGroup.Root disabled type="single">
	<ToggleGroup.Item value="bold" aria-label="Toggle bold">
		<BoldIcon />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic" aria-label="Toggle italic">
		<ItalicIcon />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
		<UnderlineIcon />
	</ToggleGroup.Item>
</ToggleGroup.Root>

Custom

A custom toggle group example.

Use font-normal to set the font weight.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
 
	const weights = [
		{ value: "light", label: "Light", class: "font-light" },
		{ value: "normal", label: "Normal", class: "font-normal" },
		{ value: "medium", label: "Medium", class: "font-medium" },
		{ value: "bold", label: "Bold", class: "font-bold" },
	];
 
	let fontWeight = $state("normal");
</script>
 
<Field.Field>
	<Field.Label>Font Weight</Field.Label>
	<ToggleGroup.Root type="single" bind:value={fontWeight} variant="outline" spacing={2} size="lg">
		{#each weights as weight (weight.value)}
			<ToggleGroup.Item
				value={weight.value}
				aria-label={weight.label}
				class="flex size-16 flex-col items-center justify-center rounded-xl"
			>
				<span class="text-2xl leading-none {weight.class}">Aa</span>
				<span class="text-xs text-muted-foreground">{weight.label}</span>
			</ToggleGroup.Item>
		{/each}
	</ToggleGroup.Root>
	<Field.Description>
		Use <code class="rounded-md bg-muted px-1 py-0.5 font-mono">font-{fontWeight}</code> to set the font
		weight.
	</Field.Description>
</Field.Field>