DOM Studio

Component

Checkbox

<dom-checkbox>

A single boolean input with checkbox semantics, keyboard support, and easy label composition.

Playground

Try every prop live

Checkbox playground

Edit props in the inspector and toggle the live checkbox.

Playground.vuevue
vue
<script setup>
import { reactive } from 'vue';
import { DomCheckbox } from '@getdom/studio/vue';

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

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

Demo

Preferences

Use checkboxes for independent yes/no choices.

Preferences.vuevue
vue
<script setup>
import { ref } from 'vue';
import { DomCheckbox } from '@getdom/studio/vue';

const product = ref(true);
const security = ref(false);
</script>

<template>
	<div class="grid w-full max-w-md gap-4">
		<DomCheckbox v-model="product" label="Product updates" description="Occasional release notes and feature announcements." />
		<DomCheckbox v-model="security" label="Security alerts" description="Important account and login notifications." />
	</div>
</template>

Reference

Props

Control props

NameTypeTSDefaultDescription
modelValuebooleanbooleanfalseChecked state.

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 Checkbox.props and inline _edit hints.

Events

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

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