Skip to main content

​
Installation

npx shadcn-svelte@next 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>

​
Examples

​
Outline

Toggle group with outline variant.

​
Single

Single selection mode.

​
Small

Smaller toggle group size.

​
Large

Larger toggle group size.

​
Disabled

Disabled toggle group state.

​
Spacing

Use spacing={2} to add spacing between toggle group items.

​
Links

Build docs developers (and LLMs) love

Get started for freeTalk to us