Toggle Group

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

Component Source Primitive API Reference

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