Toggle Group

Usage

Joined into one segmented control, same visual technique as ButtonGroup. type="single" (the default) behaves like a segmented radio group - selecting one item deselects the rest:

<SToggleGroup :items="['List', 'Grid', 'Kanban']" default-value="List" />

Multiple selection

type="multiple" lets any number of items stay pressed at once - modelValue/defaultValue become an array instead of a single value:

<SToggleGroup type="multiple" :items="items" :default-value="['bold']" />

Icon only

The item slot replaces an item's default icon+label content entirely - pair it with a visually-hidden label so the item still has an accessible name:

<SToggleGroup :items="items" default-value="list">
  <template #item="{ item }">
    <SIcon :name="item.icon" class="size-4.5" />
    <span class="sr-only">{{ item.label }}</span>
  </template>
</SToggleGroup>

Orientation

<SToggleGroup orientation="vertical" :items="['List', 'Grid', 'Kanban']" />

Disabled

disabled on the group blocks every item; disabled on one item blocks only that item:

<SToggleGroup :items="[
  { label: 'List', value: 'list' },
  { label: 'Grid', value: 'grid', disabled: true },
]" />

Custom :ui

To see exactly what you'd be overriding - the current default classes for every slot and variant - here's ToggleGroup's own theme file:

Props

ToggleGroupItem is { label: string, value: string, icon?: string, disabled?: boolean }.

Emits

Slots