DOM Studio

Component

Vue Toggle Switch Component

<dom-toggle>

Accessible switch with role=switch, keyboard support, and a smooth thumb animation.

Playground

Try every prop live

Toggle playground

Edit props in the inspector — the live switch and synthesised source stay in sync.

Notifications
Playground.vuevue
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomToggle } from '@getdom/studio';

const data = reactive({
		"modelValue": true,
		"id": "",
		"name": "",
		"label": "Notifications",
		"description": "",
		"placeholder": "",
		"required": false,
		"disabled": false,
		"readOnly": false,
		"invalid": false,
		"errors": [],
		"visible": true,
		"validators": [],
		"validateOnBlur": true,
		"chrome": "field",
		"size": "md"
	});
</script>

<template>
	<DomToggle
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Demo

Live preview

Push notifications
Marketing emails
Approval alerts
Disabled option

Usage

Vue

vue
<script setup>
import { DomToggle } from '@getdom/studio/vue';
import { ref } from 'vue';
const on = ref(true);
</script>

<template>
	<DomToggle v-model="on" label="Notifications" size="md" />
</template>

Usage

Web component

html
<dom-toggle checked aria-label="Notifications"></dom-toggle>

<script type="module">
	import '@getdom/studio/headless';
	document.querySelector('dom-toggle')
		.addEventListener('dom:change', (e) => console.log(e.detail.checked));
</script>

Props

Props

NameTypeDefaultDescription
v-modelbooleanfalseChecked state.
labelstring—Visible label next to the toggle.
size'sm' | 'md' | 'lg''md'Switch size. Uses the same size names as DomButton.
disabledbooleanfalseDisable interaction.

Keyboard

  • Space / EnterToggle the value.
  • TabMove focus through toggles in source order.