DOM Studio

Component

Vue Email Input Component

<DomEmailInput>

A convention text field for email addresses with email type, autocomplete, and an email validator.

Playground

Try every prop live

Email input playground

Adjust the props to explore sizing, content, and behaviour.

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

const data = reactive({
		"modelValue": "",
		"id": "",
		"name": "",
		"label": "Email address",
		"description": "",
		"placeholder": "you@example.com",
		"required": false,
		"disabled": false,
		"readOnly": false,
		"invalid": false,
		"errors": [],
		"visible": true,
		"validators": [],
		"validateOnBlur": true,
		"chrome": "field",
		"autocomplete": "email"
	});
</script>

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

Reference

Props

Control props

NameTypeTSDefaultDescription
labelstringstring'Email address'Visible field label.
placeholderstringstring'you@example.com'Placeholder text shown before entry.
autocompletestringstring'email'Native autocomplete hint.

Field props

NameTypeTSDefaultDescription
modelValueanyany''Current field value.
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.
descriptionstringstring''Optional helper copy below the field.
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 Email input.props and inline _edit hints.

Events

NamePayloadDescription
@update:modelValuestringFired when the email address changes.
@focusFocusEventFired when the input receives focus.
@blurFocusEventFired when the input loses focus.

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