Sivir UI
79

Toggle Group

In single mode, pressing an item releases the others, and pressing the active item clears the value. In multiple mode, each item toggles in and out of an array.

<script lang="ts">
    import AlignCenter from '@lucide/svelte/icons/align-center';
    import AlignLeft from '@lucide/svelte/icons/align-left';
    import AlignRight from '@lucide/svelte/icons/align-right';
    import * as ToggleGroup from '@sivir-ui/svelte/components/toggle-group';

    let alignment = $state('center');
</script>

<ToggleGroup.Root bind:value={alignment}>
    <ToggleGroup.Item value="left" aria-label="Align left">
        <AlignLeft size={14} />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="center" aria-label="Align center">
        <AlignCenter size={14} />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="right" aria-label="Align right">
        <AlignRight size={14} />
    </ToggleGroup.Item>
</ToggleGroup.Root>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add toggle-group

Usage

Every Item needs a unique value. Bind value on Root: a string for single (the default), a string array for multiple. Icon-only items need an aria-label.

import * as ToggleGroup from '@sivir-ui/svelte/components/toggle-group';

let alignment = $state('center');

<ToggleGroup.Root type="single" bind:value={alignment}>
  <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
  <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
  <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
</ToggleGroup.Root>

Examples

Single select

<script lang="ts">
    import LayoutGrid from '@lucide/svelte/icons/layout-grid';
    import List from '@lucide/svelte/icons/list';
    import * as ToggleGroup from '@sivir-ui/svelte/components/toggle-group';

    let view = $state('list');
</script>

<ToggleGroup.Root type="single" bind:value={view}>
    <ToggleGroup.Item value="list" aria-label="List view">
        <List size={14} />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="grid" aria-label="Grid view">
        <LayoutGrid size={14} />
    </ToggleGroup.Item>
</ToggleGroup.Root>

Multiple select

<script lang="ts">
    import * as ToggleGroup from '@sivir-ui/svelte/components/toggle-group';
</script>

<ToggleGroup.Root type="multiple" value={['bold']}>
    <ToggleGroup.Item value="bold">Bold</ToggleGroup.Item>
    <ToggleGroup.Item value="italic">Italic</ToggleGroup.Item>
    <ToggleGroup.Item value="underline">Underline</ToggleGroup.Item>
</ToggleGroup.Root>

Anatomy

ToggleGroup.Root - Manages toggle group selection.

ToggleGroup.Item - Defines a toggle group option.