mielui
Inputs

Toggle Group

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

Installation

pnpm dlx @mielui/svelte add toggle-group

Usage

By default one item can be on at a time: value is a string, and pressing the active item clears it to undefined. With type="multiple", value is an array of the pressed items. value and onValueChange follow the type you choose.

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

    let alignment = $state<string | undefined>('left');
</script>

<ToggleGroup.Root bind:value={alignment} aria-label="Text alignment">
    <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
    <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
    <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
</ToggleGroup.Root>

Give the group a name with aria-label, or point aria-labelledby at a visible label. The group is one tab stop, and arrow keys move between enabled items. disabled on Root turns off every item, and disabled on an Item turns off that one.

Examples

Paragraph alignment

The selected item sets how the paragraph below is aligned.

Single select

Multiple select

Sizes

Set size on Root and every item follows it. The default is sm.

API reference

ToggleGroup.Root

Manages toggle group selection.

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

  • disabled
    boolean

    Prevents interaction and dims the control.

    Default false

  • size
    ToggleGroupSize

    Control height of the items.

    Default 'sm'

  • aria-label
    string

    Accessible name when there is no visible label.

  • aria-labelledby
    string

    Id of the element that labels it.

  • type
    "single" | "multiple"

    single keeps one value. multiple allows several and makes value an array.

  • value Bindable
    string | string[]

    Selected value, or an array in multiple mode. Bindable.

  • onValueChange
    ((value: string | undefined) => void) | ((value: string[]) => void)

    Called with the new value when it changes.

ToggleGroup.Item

Defines a toggle group option.

  • value Required
    string

    Value this item selects.

  • disabled
    boolean

    Prevents interaction and dims the control.

  • children
    Snippet<[]>

    Content rendered inside.

  • class
    (string & (ClassValue | null))

    Classes added to the element.