Toggle

A headless toggle button with dual-mode support: standalone boolean binding or group selection with single and multi-select.

Copy Markdown

PreviewRenders elementIntermediate Apr 5, 2026

Usage

The Toggle component supports two modes:

Standalone mode: Use v-model on Toggle.Root for simple boolean on/off state
Group mode: Wrap in Toggle.Group for single or multi-select with value-based selection

Basic Toggle

A standalone bookmark toggle with icon and label driven by v-model.

Anatomy

vue

<script setup lang="ts">
  import { Toggle } from '@vuetify/v0'
</script>

<template>
  <!-- Standalone -->
  <Toggle.Root>
    <Toggle.Indicator />
  </Toggle.Root>

  <!-- Group (single select) -->
  <Toggle.Group>
    <Toggle.Root>
      <Toggle.Indicator />
    </Toggle.Root>

    <Toggle.Root>
      <Toggle.Indicator />
    </Toggle.Root>

    <Toggle.Root>
      <Toggle.Indicator />
    </Toggle.Root>
  </Toggle.Group>

  <!-- Group (multi select) -->
  <Toggle.Group multiple>
    <Toggle.Root>
      <Toggle.Indicator />
    </Toggle.Root>

    <Toggle.Root>
      <Toggle.Indicator />
    </Toggle.Root>

    <Toggle.Root>
      <Toggle.Indicator />
    </Toggle.Root>
  </Toggle.Group>
</template>

Examples

Use Toggle.Group with multiple to build a formatting toolbar. Each toggle operates independently — any combination can be active.

Multi-select bold, italic, underline, and strikethrough toggles that apply text formatting.

The quick brown fox jumps over the lazy dog. This sentence demonstrates how your formatting selections apply in real time.

View Switcher

Use Toggle.Group with mandatory for mutually exclusive options like layout switchers. The mandatory prop prevents deselecting all items.

View Switcher

Mandatory single-select toggle between grid and list views controlling layout display.

6 folders

Photos

248 items

Documents

53 items

Music

112 items

Videos

37 items

Accessibility

Toggle renders as a native <button> element with proper ARIA attributes:

Attribute	Value	Description
`aria-pressed`	`true` / `false`	Reflects the pressed state
`aria-disabled`	`true` / absent	Present when disabled

Group ARIA

Attribute	Value	Description
`role`	`group`	Identifies the toggle group
`aria-orientation`	`horizontal` / `vertical`	Layout direction
`aria-disabled`	`true` / absent	Present when group is disabled

Keyboard

Key	Action
`Space`	Toggle pressed state
`Enter`	Toggle pressed state (native button behavior)

Data Attributes

Attribute	Values	Description
`data-state`	`on` / `off`	CSS styling hook for pressed state
`data-disabled`	present / absent	CSS styling hook for disabled state
`data-orientation`	`horizontal` / `vertical`	Group orientation (on group element)