Toggle Group

A set of toggles where one or more can be active.

<script lang="ts">
  import { ToggleGroup, ToggleGroupItem } from "$lib/components/ui/toggle-group";
 
  let value = $state("center");
</script>
 
<ToggleGroup type="single" bind:value>
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

Installation

npx lily-svelte@latest add toggle-group

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the toggle-group source from the registry into `$lib/components/ui/toggle-group`.

Usage

<script lang="ts">
	import { ToggleGroup, ToggleGroupItem } from '$lib/components/ui/toggle-group';
 
	let value = $state('center');
</script>
 
<ToggleGroup type="single" bind:value>
	<ToggleGroupItem value="left">Left</ToggleGroupItem>
	<ToggleGroupItem value="center">Center</ToggleGroupItem>
	<ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

← Toggle Tooltip →