Toggle Group

Accessible, unstyled toggle button group with single or multiple selection.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { ToggleGroup, ToggleGroupItem } from "@vizejs/ui/toggle-group";

Or copy the source into your project with vize lib pull toggle-group (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Multiple-selection formatting toggle group bound with v-model. -->
<script setup lang="ts">
import { computed, ref } from "vue";

import { ToggleGroup, ToggleGroupItem } from "@vizejs/ui/toggle-group";
import type { ToggleGroupValue } from "@vizejs/ui/toggle-group";

const formatting = ref<ToggleGroupValue>(["bold"]);
const summary = computed(() =>
  Array.isArray(formatting.value) && formatting.value.length > 0
    ? formatting.value.join(", ")
    : "none",
);
</script>

<template>
  <div>
    <ToggleGroup v-model="formatting" type="multiple" aria-label="Text formatting">
      <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
      <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
      <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
    </ToggleGroup>
    <output>Active: {{ summary }}</output>
  </div>
</template>

API

ToggleGroup

Source: src/families/selection/toggle-group/toggle-group.vue

Props

Events

Slots

Exposed

ToggleGroupItem

Source: src/families/selection/toggle-group/toggle-group-item.vue

Props

Events

Slots

Exposed

Behavior

Normative contract for toggle-group.vue and toggle-group-item.vue (@vizejs/ui/toggle-group). Every row is proven by the named mounted-DOM, SSR, type, renderer, size, and tree-shaking gates.