Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Switch with State Labels for Vue

A switch named Power that starts off, with Off on one side and On on the other. The words swap as it toggles.

UI library: Ark UI

The switch starts off. The word on the leading side reads Off, and the other side reads On. Turning it on swaps those words. Its accessible name is Power.

Use swapping words when the state must be spelled out and stay in agreement with the switch. A fixed On label will lie once the switch is off. A form field can be a Checkbox. In Vue, Ark UI reports each change, and this demo stores it so the words match.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Switch anatomy: root, control, thumb, label

Usage

<div class="flex items-center gap-2">
  <span class="font-medium text-sm">{{ checked ? "On" : "Off" }}</span>
  <Switch aria-label="Power" :checked="checked" @checked-change="handleCheckedChange" />
  <span class="text-muted-foreground text-sm">{{ checked ? "Off" : "On" }}</span>
</div>

FAQ

Which side says On?

The first span shows On when the switch is on and Off when it is off, with font-medium text-sm. The second span shows the other word with text-muted-foreground text-sm. The row is flex items-center gap-2.

How do I control this switch in Vue?

This file keeps the state itself, starting off, and passes it back to the Switch. Both words read that same state. Bind it with v-model:checked, or listen to @checked-change, which receives details.checked.

What do screen readers call this switch?

It has no visible label, so the demo passes aria-label (Power). Change it to the setting the switch controls, or use a visible FieldLabel instead.

How do I add a visible label to this switch?

Put the Switch in a horizontal Field next to a FieldLabel. Clicking the label toggles the switch, and screen readers read the label with it. The Field links the label to the switch for you.

Does this switch submit with a form?

Give it a name. When on, it submits its value, which defaults to on. When off, it submits nothing.

Which keys toggle the switch?

Tab moves focus to the switch. Space toggles it, and so does Enter.

API Reference

Switch

Sets aria-label="Power", checked="checked" and checked-change="handleCheckedChange". The rest is on the Switch page.

All 19 switch examples