Toggle Group

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

<script lang="ts">
  import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
  import BookmarkSimpleIcon from "phosphor-svelte/lib/BookmarkSimpleIcon";
  import HeartIcon from "phosphor-svelte/lib/HeartIcon";
  import StarIcon from "phosphor-svelte/lib/StarIcon";
</script>
 
<ToggleGroup.Root type="multiple" variant="outline" spacing={2} size="sm">
  <ToggleGroup.Item
    value="star"
    aria-label="Toggle star"
    class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-yellow-500 data-[state=on]:*:[svg]:stroke-yellow-500"
  >
    <StarIcon />
    Star
  </ToggleGroup.Item>
  <ToggleGroup.Item
    value="heart"
    aria-label="Toggle heart"
    class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-red-500 data-[state=on]:*:[svg]:stroke-red-500"
  >
    <HeartIcon />
    Heart
  </ToggleGroup.Item>
  <ToggleGroup.Item
    value="bookmark"
    aria-label="Toggle bookmark"
    class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
  >
    <BookmarkSimpleIcon />
    Bookmark
  </ToggleGroup.Item>
</ToggleGroup.Root>

Installation

pnpm dlx jsrepo@latest add toggle-group

npx jsrepo@latest add toggle-group

yarn dlx jsrepo@latest add toggle-group

bunx jsrepo@latest add toggle-group

Install bits-ui:

pnpm add bits-ui -D

npm install bits-ui -D

yarn add bits-ui -D

bun add bits-ui -D

Copy and paste the following code into your project.

import Root from './toggle-group.svelte';
import Item from './toggle-group-item.svelte';

export {
  Root,
  Item,
  //
  Root as ToggleGroup,
  Item as ToggleGroupItem
};

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

<script lang="ts">
  import TextBIcon from "phosphor-svelte/lib/TextBIcon";
  import TextItalicIcon from "phosphor-svelte/lib/TextItalicIcon";
  import TextUnderlineIcon from "phosphor-svelte/lib/TextUnderlineIcon";
  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">
    <TextBIcon class="size-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
    <TextItalicIcon class="size-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
    <TextUnderlineIcon class="size-4" />
  </ToggleGroup.Item>
</ToggleGroup.Root>

Single

<script lang="ts">
  import TextBIcon from "phosphor-svelte/lib/TextBIcon";
  import TextItalicIcon from "phosphor-svelte/lib/TextItalicIcon";
  import TextUnderlineIcon from "phosphor-svelte/lib/TextUnderlineIcon";
  import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
 
<ToggleGroup.Root type="single">
  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
    <TextBIcon class="size-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
    <TextItalicIcon class="size-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
    <TextUnderlineIcon class="size-4" />
  </ToggleGroup.Item>
</ToggleGroup.Root>

Small

<script lang="ts">
  import TextBIcon from "phosphor-svelte/lib/TextBIcon";
  import TextItalicIcon from "phosphor-svelte/lib/TextItalicIcon";
  import TextUnderlineIcon from "phosphor-svelte/lib/TextUnderlineIcon";
  import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
 
<ToggleGroup.Root size="sm" type="single">
  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
    <TextBIcon class="size-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
    <TextItalicIcon class="size-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
    <TextUnderlineIcon class="size-4" />
  </ToggleGroup.Item>
</ToggleGroup.Root>

Large

<script lang="ts">
  import TextBIcon from "phosphor-svelte/lib/TextBIcon";
  import TextItalicIcon from "phosphor-svelte/lib/TextItalicIcon";
  import TextUnderlineIcon from "phosphor-svelte/lib/TextUnderlineIcon";
  import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
 
<ToggleGroup.Root size="lg" type="multiple">
  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
    <TextBIcon class="size-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
    <TextItalicIcon class="size-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
    <TextUnderlineIcon class="size-4" />
  </ToggleGroup.Item>
</ToggleGroup.Root>

Disabled

<script lang="ts">
  import TextBIcon from "phosphor-svelte/lib/TextBIcon";
  import TextItalicIcon from "phosphor-svelte/lib/TextItalicIcon";
  import TextUnderlineIcon from "phosphor-svelte/lib/TextUnderlineIcon";
  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">
    <TextBIcon class="size-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
    <TextItalicIcon class="size-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
    <TextUnderlineIcon class="size-4" />
  </ToggleGroup.Item>
</ToggleGroup.Root>

Spacing

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

<script lang="ts">
  import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
  import BookmarkSimpleIcon from "phosphor-svelte/lib/BookmarkSimpleIcon";
  import HeartIcon from "phosphor-svelte/lib/HeartIcon";
  import StarIcon from "phosphor-svelte/lib/StarIcon";
</script>
 
<ToggleGroup.Root type="multiple" variant="outline" spacing={2} size="sm">
  <ToggleGroup.Item
    value="star"
    aria-label="Toggle star"
    class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-yellow-500 data-[state=on]:*:[svg]:stroke-yellow-500"
  >
    <StarIcon />
    Star
  </ToggleGroup.Item>
  <ToggleGroup.Item
    value="heart"
    aria-label="Toggle heart"
    class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-red-500 data-[state=on]:*:[svg]:stroke-red-500"
  >
    <HeartIcon />
    Heart
  </ToggleGroup.Item>
  <ToggleGroup.Item
    value="bookmark"
    aria-label="Toggle bookmark"
    class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
  >
    <BookmarkSimpleIcon />
    Bookmark
  </ToggleGroup.Item>
</ToggleGroup.Root>