DOM Studio

Component

Vue Toggle Button Component

<DomToggleButton>

A pressable form button for boolean choices, using aria-pressed and v-model.

Playground

Try every prop live

Toggle button playground

Use a toggle button when a boolean setting should feel like a compact action.

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

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

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

Demo

Boolean action

The button uses aria-pressed and still writes through v-model.

Use this for compact boolean actions that should read like buttons.

Pinned: false

Pin.vuevue
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomToggleButton } from '@getdom/studio';

const pinned = ref(false);
</script>

<template>
	<div class="space-y-3">
		<DomToggleButton
			v-model="pinned"
			label="Pinned state"
			pressed-label="Pinned"
			unpressed-label="Pin item"
			description="Use this for compact boolean actions that should read like buttons."
		/>
		<p class="text-xs text-muted-fg">Pinned: <code class="text-canvas-fg">{{ pinned }}</code></p>
	</div>
</template>

Reference

Props

Control props

NameTypeTSDefaultDescription
modelValuebooleanbooleanfalsePressed state.
pressedLabelstringstring''Optional button label shown while pressed.
unpressedLabelstringstring''Optional button label shown while not pressed.
size'sm' | 'md' | 'lg'string'md'Button size.

Field props

NameTypeTSDefaultDescription
idstringstring''Optional ID override. By default parent forms derive the input ID from the field path using underscores.
namestringstring''Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
labelstringstring''Visible field label.
descriptionstringstring''Optional helper copy below the field.
placeholderstringstring''Placeholder shown when the control is empty.
requiredbooleanbooleanfalseMark the field as required.
disabledbooleanbooleanfalseDisable field interaction.
readOnlybooleanbooleanfalseShow the value but prevent editing.
invalidbooleanbooleanfalseMark the field invalid.
errors
ts
[
	{
		name: "Validation name",
		message: "Error message",
	}
]
array | object | stringArray<ErrorsItem
type ErrorsItem = {
	name?: string; // Name
	message?: string; // Message
};
>		[]Validation errors for this field.
visiblebooleanbooleantrueShow or hide the field.
validatorsarrayArray<unknown>[]Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
validateOnBlurbooleanbooleantrueRun validators when the field loses focus.
chrome'field' | 'none' | falsestring'field'Render default field chrome, or hide chrome while keeping form state wiring.

Auto-generated from Toggle button.props and inline _edit hints.

Events

NamePayloadDescription
@update:modelValue(pressed
pressed: boolean;
: boolean)		Emitted when pressed changes.
@focus——
@blur——

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.