GitHub55X

Toggle Group

Vue toggle group for single or multi-select toolbars of related toggle buttons.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/toggle-group.json

Composition

      
      ToggleGroup.Root
├── ToggleGroup.Context
├── ToggleGroup.Item
└── ToggleGroup.RootProvider

Usage

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

<template>
  <ToggleGroup.Root variant="outline" size="md">
    <ToggleGroup.Item value="left">
      <!-- … -->
    </ToggleGroup.Item>
  </ToggleGroup.Root>
</template>

Examples

Variants

Use the variant prop on ToggleGroup.Root to change the visual style of the group. Items inherit the variant from the root.

Sizes

Use the size prop on ToggleGroup.Root to change the size of the group and its items.

Controlled

Use the value and onValueChange props to control the toggle group state.

Root Provider

An alternative way to control the toggle group is to use the RootProvider component and the useToggleGroup hook. This way you can access the state and methods from outside the component.

Multiple

Demonstrates how to enable multiple selection within the group.

API

See Ark UI Toggle Group docs for full props and examples.

ToggleTooltip