IToggleGroup ​

A row of toggles sharing one model — a view switcher, a date range, a formatting toolbar. The group is one Tab stop, with the arrow keys moving between items.

<script setup lang="ts">
const view = ref('Board')
</script>

<template>
  <IToggleGroup v-model="view" :items="['List', 'Board', 'Calendar']" />
</template>

Single or multiple ​

single is the default and behaves like a segmented control — one item on at a time, with the model holding that item's value. multiple lets any number be on, and the model becomes an array.

<script setup lang="ts">
const marks = ref(['Bold'])
</script>

<template>
  <IToggleGroup
    v-model="marks"
    :items="[
      { label: 'Bold', icon: BoldIcon },
      { label: 'Italic', icon: ItalicIcon },
      { label: 'Underline', icon: UnderlineIcon },
    ]"
    type="multiple"
    icon-only
  />
</template>

Items ​

A bare string becomes both the label and the value. Pass objects when the two differ, or when an item needs an icon, an ariaLabel or disabling.

const items = [
  'List', //                                    label and value both "List"
  { label: 'Board', value: 'board' }, //         value differs from the label
  { label: 'Calendar', icon: CalendarIcon }, //  icon beside the label
  { label: 'Timeline', disabled: true }, //      present but not selectable
]

Variants ​

variant decides how the items are spaced. joined, the default, squares them where they meet and collapses their adjacent borders, as IButtonGroup does. plain leaves them as free-standing buttons with a gap.

<IToggleGroup v-model="view" :items="views" variant="joined" />
<IToggleGroup v-model="view" :items="views" variant="plain" />

Either way an item is the same button IToggle renders, so a group and a lone toggle sit together.

Icon-only ​

icon-only hides the labels and squares the items. Each label becomes its item's accessible name; pass ariaLabel on an item when the label is too terse to stand alone.

<IToggleGroup
  v-model="view"
  :items="[
    { label: 'List', value: 'list', icon: ListIcon },
    { label: 'Board', value: 'board', icon: GridIcon },
    { label: 'Calendar', value: 'calendar', icon: CalendarIcon },
  ]"
  icon-only
/>

Sizes ​

The same five sizes as IToggle and IButton.

<IToggleGroup v-model="range" :items="['Day', 'Week', 'Month']" size="xs" />
<IToggleGroup v-model="range" :items="['Day', 'Week', 'Month']" size="sm" />
<IToggleGroup v-model="range" :items="['Day', 'Week', 'Month']" size="md" />
<IToggleGroup v-model="range" :items="['Day', 'Week', 'Month']" size="lg" />

Full width ​

block stretches the group and splits the width evenly between its items.

<IToggleGroup v-model="view" :items="views" block />

Vertical ​

<IToggleGroup v-model="view" :items="views" orientation="vertical" />

Props ​

ToggleGroupItemOption ​

Events ​

Slots ​

Accessibility ​

The group is one Tab stop; arrow keys move between items from there, along the axis orientation sets. Set loop to wrap around at the ends. With icon-only, each item's hidden label becomes its aria-label, so the group never reaches a screen reader as a row of unnamed buttons.