Studio
2

Toggle Group

Installation

pnpm dlx @mielui/svelte add toggle-group

Usage

Arrow keys navigate enabled items with a single tab stop. Single mode allows the active item to be cleared; multiple mode keeps an array of selected values.

Single mode uses a string value and reports undefined when cleared. With type="multiple", bind a string array; clearing all selections reports an empty array. The value and onValueChange types follow the selected mode.

import * as ToggleGroup from '$lib/mielui/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

Single select

Multiple select

API reference

ToggleGroup.Root

Manages toggle group selection.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —
disabled boolean | undefined false
type "single" | undefined | "multiple" —
value Bindable string | undefined | string[] | undefined —
onValueChange ((value: string | undefined) => void) | undefined | ((value: string[]) => void) | undefined —

ToggleGroup.Item

Defines a toggle group option.

Prop Type Default
value Required string —
disabled boolean | undefined —
children Snippet<[]> | undefined —
class (string & (ClassValue | null)) | undefined —