Docs
Toggle Group

Toggle Group

A set of two-state buttons that can be toggled on or off.

Installation

bash
npx shadcn-vue@latest add toggle-group

Usage

vue
<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

Edit this page on GitHub