@vibe-labs/design-vue-toggles

Vue 3 toggle switch component for the Vibe Design System.

Installation

import { VibeToggle } from "@vibe-labs/design-vue-toggles";

Requires the CSS layer from @vibe-labs/design-components-toggles.

Component

VibeToggle

Toggle switch with label support, native form submission, and proper role="switch" ARIA semantics.

Usage

<!-- Basic -->
<VibeToggle v-model="enabled" label="Enable notifications" />

<!-- Without label -->
<VibeToggle v-model="darkMode" aria-label="Dark mode" />

<!-- Label on the left -->
<VibeToggle v-model="active" label="Active" label-position="left" />

<!-- Sizes -->
<VibeToggle v-model="val" size="sm" label="Small" />
<VibeToggle v-model="val" size="md" label="Medium" />
<VibeToggle v-model="val" size="lg" label="Large" />

<!-- Disabled -->
<VibeToggle v-model="locked" label="Locked setting" disabled />

<!-- In a form (native submission) -->
<form @submit="onSubmit">
  <VibeToggle v-model="agreed" name="terms" value="accepted" label="I agree to the terms" required />
</form>

<!-- External label -->
<label id="my-label">WiFi</label>
<VibeToggle v-model="wifi" aria-labelledby="my-label" />

<!-- With description -->
<VibeToggle v-model="sync" label="Auto-sync" aria-describedby="sync-desc" />
<p id="sync-desc">Automatically sync changes every 5 minutes.</p>

Props

Prop	Type	Default	Description
modelValue	boolean	false	Checked state (v-model)
size	ToggleSize	"md"	sm · md · lg
disabled	boolean	false	Disabled state
label	string	—	Label text beside the toggle
labelPosition	"left" | "right"	"right"	Label placement
name	string	—	Form field name
value	string	"on"	Submitted value when checked
required	boolean	false	Required field
id	string	auto	Input element ID
ariaLabel	string	—	Accessible label (when no visible label)
ariaLabelledby	string	—	External label element ID
ariaDescribedby	string	—	Describing element ID

Events

Event	Payload	Description
update:modelValue	boolean	Toggle state changed
change	boolean	Toggle state changed

Accessibility

Uses role="switch" with aria-checked — the correct ARIA pattern for toggle switches (not just a styled checkbox). The hidden <input type="checkbox"> provides native form semantics and keyboard activation (Space to toggle).

Dependencies

Package	Purpose
@vibe-labs/design-components-toggles	CSS tokens + generated styles

Build

npm run build

Built with Vite + vite-plugin-dts. Outputs ES module with TypeScript declarations.