Forms

ToggleGroup

A set of related toggles with roving-focus keyboard navigation. Use type to switch between single and multiple selection.

Playground

Experiment with different props in real-time.

Variant

Color

Size

Attached

Block

Basic Usage

Single selection: value is a string.

<script lang="ts">
  import { ToggleGroup } from 'sv5ui';

  let alignment = $state('left');

  const items = [
    { value: 'left', icon: 'lucide:align-left', ariaLabel: 'Align left' },
    { value: 'center', icon: 'lucide:align-center', ariaLabel: 'Align center' },
    { value: 'right', icon: 'lucide:align-right', ariaLabel: 'Align right' }
  ];
</script>

<ToggleGroup {items} bind:value={alignment} />

Multiple Selection

With type="multiple" the value is a string[].

Active: bold

<script lang="ts">
  import { ToggleGroup } from 'sv5ui';

  // With type="multiple" the value is a string[]
  let formats = $state(['bold']);

  const items = [
    { value: 'bold', icon: 'lucide:bold', ariaLabel: 'Bold' },
    { value: 'italic', icon: 'lucide:italic', ariaLabel: 'Italic' },
    { value: 'underline', icon: 'lucide:underline', ariaLabel: 'Underline' }
  ];
</script>

<ToggleGroup type="multiple" {items} bind:value={formats} />
<p>Active: {formats.join(', ') || 'none'}</p>

With Labels

<ToggleGroup
  value="weekly"
  items={[
    { value: 'daily', label: 'Daily' },
    { value: 'weekly', label: 'Weekly' },
    { value: 'monthly', label: 'Monthly' }
  ]}
/>

Attached (Segmented Control)

Set attached for a flush, segmented look.

<!-- Segmented-control look -->
<ToggleGroup
  attached
  value="grid"
  items={[
    { value: 'list', leadingIcon: 'lucide:list', label: 'List' },
    { value: 'grid', leadingIcon: 'lucide:grid-3x3', label: 'Grid' }
  ]}
/>

Variants

<ToggleGroup variant="ghost" value="a" items={items} />
<ToggleGroup variant="outline" value="a" items={items} />
<ToggleGroup variant="soft" value="a" items={items} />
<ToggleGroup variant="subtle" value="a" items={items} />

Colors

<ToggleGroup color="primary" value="a" attached items={items} />
<ToggleGroup color="success" value="a" attached items={items} />
<ToggleGroup color="error" value="a" attached items={items} />

Sizes

<ToggleGroup size="xs" value="a" attached items={items} />
<ToggleGroup size="md" value="a" attached items={items} />
<ToggleGroup size="xl" value="a" attached items={items} />

Block

Stretch to fill the container with equal-width items.

<ToggleGroup
  block
  attached
  value="grid"
  items={[
    { value: 'list', label: 'List' },
    { value: 'grid', label: 'Grid' },
    { value: 'board', label: 'Board' }
  ]}
/>

Vertical

<ToggleGroup
  orientation="vertical"
  attached
  value="center"
  items={[
    { value: 'start', icon: 'lucide:align-start-vertical', ariaLabel: 'Start' },
    { value: 'center', icon: 'lucide:align-center-vertical', ariaLabel: 'Center' },
    { value: 'end', icon: 'lucide:align-end-vertical', ariaLabel: 'End' }
  ]}
/>

ToggleGroupItem

Shape of each entry in the items array.

Field	Type	Default	Description
`value`	`string`	`-`	`Unique value identifying the item`
`label`	`string`	`-`	`Text shown inside the item`
`icon`	`string`	`-`	`Renders an icon-only item`
`leadingIcon`	`string`	`-`	`Icon before the label`
`trailingIcon`	`string`	`-`	`Icon after the label`
`ariaLabel`	`string`	`-`	`Accessible name, required for icon-only items`
`disabled`	`boolean`	`false`	`Disable this item`

UI Slots

Use the ui prop to override classes.

Slot	Description
`base`	`The group container`
`item`	`Each toggle item`

Props

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	`Selection mode. Switches value between string and string[]`
`value`	`string \| string[]`	`-`	`Pressed value(s), bindable`
`onValueChange`	`(value) => void`	`-`	`Callback when the value changes`
`items`	`ToggleGroupItem[]`	`[]`	`Items to render`
`variant`	`'outline' \| 'soft' \| 'subtle' \| 'ghost'`	`'ghost'`	`Visual style`
`color`	`ColorType`	`'primary'`	`Color applied to pressed items`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Item size`
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	`Layout and keyboard direction`
`attached`	`boolean`	`false`	`Flush items into a segmented control`
`block`	`boolean`	`false`	`Full-width, equal-width items`
`square`	`boolean`	`false`	`Equal width and height items`
`disabled`	`boolean`	`false`	`Disable the whole group`
`loop`	`boolean`	`true`	`Loop keyboard navigation`
`rovingFocus`	`boolean`	`true`	`Arrow keys move focus between items`
`itemSlot`	`Snippet<[{ item }]>`	`-`	`Custom content per item`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Toggle Textarea