Toggle Group
A set of toggles where one or more can be active.
Installation
Installs the style saved in lily.json. For a new Diamond project,
run lily-svelte init --style diamond first.
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>