Component

Toggle

<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

Properties

Control props

ValueOn / off state.

Field props

Optional ID override. By default parent forms derive the input ID from the field path using underscores.

Name

Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.

Label

Visible field label.

Description

Optional helper copy below the field.

Placeholder

Placeholder shown when the control is empty.

RequiredMark the field as required.

DisabledDisable field interaction.

Read OnlyShow the value but prevent editing.

InvalidMark the field invalid.

Errors

Validation errors for this field.

VisibleShow or hide the field.

Validators

No validators yet.

Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.

Validate On BlurRun validators when the field loses focus.

Chrome

Render default field chrome, or false to render only the control while keeping form state wiring.

Playground.vuevue

<script setup>
import { reactive } from 'vue';
import { DomToggle } from '@getdom/studio/vue';

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"
	});
</script>

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

Demo

Live preview

Push notifications

Marketing emails

Disabled option

Usage

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" />
</template>

Usage

Web component

<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

Name	Type	Default	Description
v-model	boolean	false	Checked state.
label	string	—	Visible label next to the toggle.
disabled	boolean	false	Disable interaction.

Keyboard

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