Toggle Group

A group of toggle buttons where one or multiple can be selected.

<script lang="ts">
import { Bold, Italic, Underline } from "@lucide/svelte";
import { ToggleGroup, ToggleGroupItem } from "coss-svelte";
</script>

<ToggleGroup type="multiple" value={["bold"]}>
	<ToggleGroupItem aria-label="Toggle bold" value="bold"><Bold /></ToggleGroupItem>
	<ToggleGroupItem aria-label="Toggle italic" value="italic"><Italic /></ToggleGroupItem>
	<ToggleGroupItem aria-label="Toggle underline" value="underline"><Underline /></ToggleGroupItem>
</ToggleGroup>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { ToggleGroup, ToggleGroupItem } from "coss-svelte";

Anatomy

ToggleGroup
ToggleGroupItem

API Reference

ToggleGroup

A group of toggle buttons where one or multiple can be selected.

Signatures

{ type?: "single"; value?: string; onValueChange?: OnChangeFn<string> }{ type: "multiple"; value?: string[]; onValueChange?: OnChangeFn<string[]> }

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`"button"`	Behavior, selection, or HTML type passed to the underlying control.
`bind:value`	`string \| string[]`	`""`	Current value for the component. Bind with `bind:value` when supported.
`items`	`ToggleItem[]`	`[]`	Items rendered by the component's built-in fallback composition.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI ToggleGroup.Root.

ToggleGroupItem

Renders one item inside a toolbar group.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI ToggleGroup.Item.

Implementation Details

Status: Stable
Foundation: bits
Category: Toggle & Choice
Particles: 9