shadcn-vue/apps/www/src/content/docs/components/toggle-group.md

title	description	source	primitive
Toggle Group	A set of two-state buttons that can be toggled on or off.	apps/www/registry/default/ui/toggle-group	https://www.reka-ui.com/docs/components/toggle-group.html

Installation

npx shadcn-vue@latest add toggle-group

<template #Manual>

Install the following dependencies:

npm install reka-ui

Copy and paste the following code into your project

<<< @/registry/default/ui/toggle-group/ToggleGroup.vue

Usage

<script setup lang="ts">
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
</script>

<template>
  <ToggleGroup type="single">
    <ToggleGroupItem value="a">
      A
    </ToggleGroupItem>
    <ToggleGroupItem value="b">
      B
    </ToggleGroupItem>
    <ToggleGroupItem value="c">
      C
    </ToggleGroupItem>
  </ToggleGroup>
</template>

Examples

Default

Outline

Single

Small

Large

Disabled