Toggle Group

A row of toggles with shared selection, for single or multiple choice.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add toggle-group

Usage

Import Toggle Group and compose it with Item components:

import * as ToggleGroup from '$lib/sivir/components/toggle-group';

<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

Toggle Group in single and multiple modes.

Single select

Multiple select

Anatomy

ToggleGroup.Root - Manages toggle group selection.

ToggleGroup.Item - Defines a toggle group option.