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

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.

View Switcher

Use Toggle.Group with mandatory for mutually exclusive options like layout switchers. The mandatory prop prevents deselecting all 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)