Usage

ToggleButtonGroup keeps the pressed state of its ToggleButton children. Each child needs a value. The group's v-model:value replaces that button's own pressed state.

type="single" keeps one button pressed. Pressing it again clears the selection, and the value is null. type="multiple" presses buttons independently, and the value is a list. orientation is horizontal or vertical. label is the group's accessible name.

<script setup lang="ts">
import { ToggleButton, ToggleButtonGroup } from '@astryx-vue/core/ToggleButton'
import { ref } from 'vue'

const view = ref<string | null>('grid')
</script>

<template>
  <ToggleButtonGroup v-model:value="view" label="View mode">
    <ToggleButton label="List" value="list" />
    <ToggleButton label="Grid" value="grid" />
    <ToggleButton label="Board" value="board" />
  </ToggleButtonGroup>
</template>

Examples

Group

Single selection

Multiple selections

Toggle button groups in single-select and multi-select modes. Single selection acts as a view mode switcher; multiple selection forms a formatting toolbar.

Vertical

Single select

Multi select

A vertically stacked ToggleButtonGroup using the vertical orientation, shown with both single-select and multi-select behavior.