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.

Product updatesOccasional release notes.

Properties

Control props

ValueChecked 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 { 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.

Product updatesOccasional release notes and feature announcements.

Security alertsImportant account and login notifications.

Preferences.vuevue

<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

Name	Type	TS	Default	Description
`modelValue`	boolean	boolean	false	Checked state.

Field props

Name	Type	TS	Default	Description
`id`	string	string	''	Optional ID override. By default parent forms derive the input ID from the field path using underscores.
`name`	string	string	''	Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
`label`	string	string	''	Visible field label.
`description`	string	string	''	Optional helper copy below the field.
`placeholder`	string	string	''	Placeholder shown when the control is empty.
`required`	boolean	boolean	false	Mark the field as required.
`disabled`	boolean	boolean	false	Disable field interaction.
`readOnly`	boolean	boolean	false	Show the value but prevent editing.
`invalid`	boolean	boolean	false	Mark the field invalid.
`errors` `[ { name: "Validation name", message: "Error message", } ]`	array \| object \| string	Array<ErrorsItem `type ErrorsItem = { name?: string; // Name message?: string; // Message };` >	{}	Validation errors for this field.
`visible`	boolean	boolean	true	Show or hide the field.
`validators`	array	Array<unknown>	[]	Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
`validateOnBlur`	boolean	boolean	true	Run validators when the field loses focus.
`chrome`	'field' \| false	string	'field'	Render default field chrome, or false to render only the control while keeping form state wiring.

Auto-generated from Checkbox.props and inline _edit hints.

Events

Name	Payload	Description
@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.