ToggleGroup

Group of toggle buttons for single or multiple selection, with optional icons. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue

import { UiToggleGroup } from '@ziyarago/ui/vue'

Single

Vue

<UiToggleGroup
  v-model="value"
  :options="[{ value: 'list', label: 'List' }, { value: 'grid', label: 'Grid' }, { value: 'map', label: 'Map' }]"
 />

Single, allowEmpty (click the active one to clear)

Vue

<UiToggleGroup
  allow-empty
  v-model="value"
  :options="[{ value: 'list', label: 'List' }, { value: 'grid', label: 'Grid' }, { value: 'map', label: 'Map' }]"
 />

Multiple

Vue

<UiToggleGroup
  multiple
  v-model="value"
  :options="[{ value: 'wifi', label: 'Wi-Fi' }, { value: 'meals', label: 'Meals' }, { value: 'shuttle', label: 'Shuttle' }]"
 />

Icon only

Vue

<UiToggleGroup
  icon-only
  v-model="value"
  :options="[{ value: 'list', label: 'List', icon: 'list' }, { value: 'grid', label: 'Grid', icon: 'layout-grid' }, { value: 'map', label: 'Map', icon: 'map' }]"
 />

Sizes

Vue

<UiToggleGroup
  v-model="value"
  :options="[{ value: 'a', label: 'Day' }, { value: 'b', label: 'Week' }, { value: 'c', label: 'Month' }]"
  size="xs"
 />

<UiToggleGroup
  v-model="value"
  :options="[{ value: 'a', label: 'Day' }, { value: 'b', label: 'Week' }, { value: 'c', label: 'Month' }]"
  size="sm"
 />

<UiToggleGroup
  v-model="value"
  :options="[{ value: 'a', label: 'Day' }, { value: 'b', label: 'Week' }, { value: 'c', label: 'Month' }]"
  size="md"
 />

<UiToggleGroup
  v-model="value"
  :options="[{ value: 'a', label: 'Day' }, { value: 'b', label: 'Week' }, { value: 'c', label: 'Month' }]"
  size="lg"
 />

<UiToggleGroup
  v-model="value"
  :options="[{ value: 'a', label: 'Day' }, { value: 'b', label: 'Week' }, { value: 'c', label: 'Month' }]"
  size="xl"
 />

API reference

Group of toggle buttons with single or multiple selection, optionally icon-only.

Props

PropType and valuesDefaultDescription

optionsrequired{ value: string; label: string; icon?: string }[]'[]'Buttons to render. label is also used as the tooltip.

modelValuev-modelstring | string[]—Selected value, or array of values when multiple.

multiplebooleanfalseAllows several pressed buttons; modelValue becomes an array.

iconOnlybooleanfalseHides labels and shows only icons.

allowEmptybooleanfalseSingle mode only: clicking the pressed button deselects it and emits null.

sizexssmmdlgxl'md'Control size.

Events

Vue: @name. React: onName.

changeCalled with the new value (string), null when deselected with allowEmpty, or the new array when multiple.

Notes

Each button exposes aria-pressed. In single mode clicking the active option keeps it selected.