Switch

A toggle for an immediate on/off setting — like enabling a feature or flipping a preference. Reach for a Switch when the change takes effect right away; use a Checkbox when the choice is part of a form the user submits later.

Bind its state with v-model. Like the other controls it's label-less: pair it with a Label (matching for/id), or — when there's no visible label — give it an ariaLabel so it still has an accessible name.

Usage

Standalone, with an ariaLabel for accessibility since there's no visible text.

BasicA standalone switch with an aria-label.

With a label

Pair it with a Label via for/id. Clicking the label toggles the switch.

With LabelSwitch paired with a label.

States

On, off, and disabled.

StatesOn, off, disabled.

Props

Prop	Type	Default	Description
modelValue	boolean	—	The on/off state. Use with v-model. Required.
id	string	—	The control's id, for pairing with a Label's for. Provided automatically inside a Field.
disabled	boolean	false	Disables the switch. Inherited from a surrounding Field.
ariaLabel	string	—	Accessible name when there's no associated Label. Set this or pair with a Label.
class	string	—	Classes merged onto the track.

Accessibility

• Renders a real <input type="checkbox"> with role="switch" and aria-checked, so assistive tech announces it as an on/off switch (not a plain checkbox) and it toggles with the keyboard.
• A switch must have an accessible name: either pair it with a Label (for/id) or set ariaLabel. A switch with neither is unlabelled and inaccessible.
• disabled sets the matching state on the underlying input.

TIP

Inside a Field, the switch inherits id and disabled from the field context. See Field for the full label → control → description pattern.