Switch

VdSwitch is an accessible on/off toggle built on a native checkbox with role="switch". It needs no JavaScript — just the .vd-form-switch markup — and binds with v-model.

Basic Toggle

Wi-Fi

Wi-Fi is on.

Notifications

<label class="vd-form-switch">
  <input type="checkbox" class="vd-form-switch-input" role="switch" checked />
  <span class="vd-form-switch-label">Wi-Fi</span>
</label>

Size Variants

SmallDefaultLarge

<!-- Small -->
<label class="vd-form-switch vd-form-switch-sm">
  <input type="checkbox" class="vd-form-switch-input" role="switch" checked />
  <span class="vd-form-switch-label">Small</span>
</label>

<!-- Default -->
<label class="vd-form-switch">
  <input type="checkbox" class="vd-form-switch-input" role="switch" checked />
  <span class="vd-form-switch-label">Default</span>
</label>

<!-- Large -->
<label class="vd-form-switch vd-form-switch-lg">
  <input type="checkbox" class="vd-form-switch-input" role="switch" checked />
  <span class="vd-form-switch-label">Large</span>
</label>

Disabled

Locked on

<label class="vd-form-switch">
  <input type="checkbox" class="vd-form-switch-input" role="switch" checked disabled />
  <span class="vd-form-switch-label">Locked on</span>
</label>

API Reference

Usage

<script setup lang="ts">
import { VdSwitch } from "@vanduo-oss/vd3";
const wifi = ref(true);
</script>

<template>
  <VdSwitch v-model="wifi" label="Wi-Fi" />
</template>

CSS Classes

Class	Description
`.vd-form-switch`	The <label> wrapper that styles the track + thumb
`.vd-form-switch-input`	The visually-styled checkbox input — pair with role="switch"
`.vd-form-switch-label`	Text label rendered beside the track
`.vd-form-switch-sm`	Small size variant — place on the wrapper
`.vd-form-switch-lg`	Large size variant
`.vd-form-switch-inline`	Lays the label and track inline for compact rows

Component API

Prop / event	Description
`v-model (modelValue)`	Two-way bound on/off state (boolean).
`:label`	Text label rendered beside the track (or use the default slot).
`:size`	'sm' \| 'md' \| 'lg' — track size (default 'md').
`:disabled`	Greys out and blocks interaction when true.
`:name / :id`	Forwarded to the underlying input for forms / labels.
`@update:modelValue`	Fired with the new boolean when the user toggles the switch.

Events

Event	Description
`change`	Native input event fired on toggle. In Vue, prefer `@update:modelValue` (via `v-model`).

Accessibility

The input carries role="switch", so assistive tech announces it as an on/off control rather than a checkbox.
Wrapping everything in the <label> ties the text to the control — clicking the label toggles it. Pass id/name when you need an explicit association.
Fully keyboard operable: Tab to focus, Space to toggle.
:disabled sets the native disabled attribute, removing it from the tab order.