Switch

A switch for on/off state or multi-selection groups with tri-state support.

Usage

Anatomy

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

<template>
  <!-- Standalone -->
  <Switch.Root>
    <Switch.Track>
      <Switch.Thumb />
    </Switch.Track>
  </Switch.Root>

  <!-- Group -->
  <Switch.Group>
    <Switch.Root>
      <Switch.Track>
        <Switch.Thumb />
      </Switch.Track>
    </Switch.Root>

    <Switch.Root>
      <Switch.Track>
        <Switch.Thumb />
      </Switch.Track>
    </Switch.Root>
  </Switch.Group>

  <!-- Group with Select All -->
  <Switch.Group>
    <Switch.SelectAll>
      <Switch.Track>
        <Switch.Thumb />
      </Switch.Track>
    </Switch.SelectAll>

    <Switch.Root>
      <Switch.Track>
        <Switch.Thumb />
      </Switch.Track>
    </Switch.Root>
  </Switch.Group>

  <!-- With form submission -->
  <Switch.Root>
    <Switch.Track>
      <Switch.Thumb />
    </Switch.Track>

    <Switch.HiddenInput />
  </Switch.Root>
</template>

Examples

The SelectAll component:

• Binds to the group’s isAllSelected and isMixed state

• Calls toggleAll on click

• Does NOT register as a group item

• Sets aria-checked="mixed" and data-state="indeterminate" when partially selected

Recipes

Form Integration

Pass the name prop on Switch.Root and a hidden native <input type="checkbox"> is rendered automatically — no Switch.HiddenInput placement is required. The input is visually hidden, inert, and tabindex="-1", so it only participates in FormData submission:

<template>
  <Switch.Root name="notifications" value="on">
    <Switch.Track>
      <Switch.Thumb />
    </Switch.Track>
  </Switch.Root>
</template>

Switch.HiddenInput is exported as an internal building block for custom layouts, but auto-rendering via name is the only supported form integration path — placing Switch.HiddenInput as a child of a Switch.Root that already has a name will produce two hidden inputs.

Styling with Data Attributes

Switch subcomponents expose data attributes for CSS styling without conditional classes. Switch.Root and Switch.SelectAll emit both data-state and data-disabled, while Switch.Track and Switch.Thumb emit only data-state (they inherit disabled styling from the Root ancestor):

<template>
  <Switch.Root class="data-[disabled]:opacity-50">
    <Switch.Track class="bg-gray-300 transition-colors data-[state=checked]:bg-primary">
      <Switch.Thumb />
    </Switch.Track>
  </Switch.Root>
</template>

Switch.Thumb applies an inline visibility: hidden when unchecked, so the thumb is not visible until the switch is on. This means a sliding transform on Switch.Thumb cannot animate from the “off” position. Animate the Switch.Track background color instead, as shown above.

Accessibility

The Switch.Root component renders as a button and handles all ARIA attributes automatically:

• role="switch" for proper semantics

• aria-checked reflects state (true, false, or "mixed")

• aria-disabled when switch is disabled

• aria-label from the label prop

• tabindex="0" for keyboard focus (removed when disabled)

• Space key toggles the switch (Enter works when rendered as button)

For custom implementations, use renderless mode and bind the attrs slot prop to your element:

<template>
  <Switch.Root v-slot="{ attrs }" renderless>
    <div v-bind="attrs">
      <!-- Custom switch visual -->
    </div>
  </Switch.Root>
</template>