A row of buttons that stay pressed — one at a time, or several at once.
Import it from rei-kit:
import { ToggleGroup } from 'rei-kit'
Open ToggleGroup in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { Bold, Italic, Underline } from 'lucide-vue-next'
import { ToggleGroup } from 'rei-kit'
const marks = ref<string[]>([])
const marksOptions = [
{ value: 'bold', label: 'Bold', icon: Bold, iconOnly: true },
{ value: 'italic', label: 'Italic', icon: Italic, iconOnly: true },
{ value: 'underline', label: 'Underline', icon: Underline, iconOnly: true },
]
</script>
<template>
<ToggleGroup v-model="marks" mode="multiple" :options="marksOptions" label="Text style" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
options | readonly { value: V /** Visible text — or, with an icon and `iconOnly`, the accessible name. */ label: string icon?: Component | undefined /** Show the icon alone. The label becomes the button's accessible name. */ iconOnly?: boolean | undefined disabled?: boolean | undefined }[] | yes | |
label | string | yes | The group's accessible name. |
mode | M | 'single' as M | `single`: at most one pressed. `multiple`: any number. |
required | boolean | false | In `single` mode, never let the last pressed button go. |
size | 'sm' | 'md' | 'md' |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.