Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/toggle-group.jsonUsage
<script lang="ts">
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root>
<ToggleGroup.Item value="bold">Bold</ToggleGroup.Item>
<ToggleGroup.Item value="italic">Italic</ToggleGroup.Item>
<ToggleGroup.Item value="underline">Underline</ToggleGroup.Item>
</ToggleGroup.Root>API Reference
ToggleGroup.Root
The root owns the selection and shares its styling and interaction state with the child toggles.
| Prop | Type | Default | Description |
|---|---|---|---|
value | readonly string[] | [] | Current selection; supports bind:value |
defaultValue | readonly string[] | [] | Initial selection for uncontrolled use |
multiple | boolean | false | Allows more than one pressed item |
orientation | "horizontal" \| "vertical" | "horizontal" | Sets the group axis and arrow-key direction |
disabled | boolean | false | Disables every item in the group |
loopFocus | boolean | true | Wraps arrow-key focus at the ends of the group |
onValueChange | (value: string[]) => void | — | Runs when the selection changes |
variant | "default" \| "outline" | "default" | Controls the styling of all child toggles |
size | "default" \| "sm" \| "lg" | "default" | Controls the size of all child toggles |
as | keyof HTMLElementTagNameMap | "div" | HTML element to render |
ToggleGroup.Item
Each item needs a unique value. It accepts the Toggle props and inherits variant and size from
the root. Arrow keys, Home, and End move focus within the group.
ToggleGroup.Separator
The separator follows the group’s orientation and preserves the connected outline treatment.
See the Shards Toggle Group API for focus and selection behavior.
Examples
Small Toggles
Large Toggles
With Outline Toggles
Vertical
Disabled
With Disabled Toggle
Multiple selection
With Tooltips
Changelog
- Mar 20, 2026 —
Togglerenamed toToggleGroupItem