DOM Studio

Component

Text input

<DomTextInput>

A labelled single-line text field, wrapped in DomField so the label and description are uniform across forms.

Playground

Try every prop live

Text input playground

Edit props in the inspector — label, description, placeholder, and disabled state update live.

Shown on your profile.

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

const data = reactive({
	  "modelValue": "",
	  "id": "",
	  "name": "",
	  "label": "Display name",
	  "description": "Shown on your profile.",
	  "placeholder": "Your name",
	  "required": false,
	  "disabled": false,
	  "readOnly": false,
	  "invalid": false,
	  "errors": {},
	  "visible": true,
	  "validators": [],
	  "validateOnBlur": true,
	  "chrome": "field",
	  "type": "text",
	  "autocomplete": ""
	});
</script>

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

Demo

Live preview

Shown publicly on your profile.

Value: Alex Morgan

Usage

Vue

<script setup>
import { DomTextInput } from '@getdom/studio/vue';
import { ref } from 'vue';
const name = ref('');
</script>

<template>
  <DomTextInput
    v-model="name"
    label="Display name"
    description="Shown publicly on your profile."
    placeholder="DOM Studio"
  />
</template>

Props

Props

NameTypeDefaultDescription
v-modelstring''Bound text value.
labelstring—Small label above the input.
descriptionstring—Hint shown below the input.
placeholderstring—Input placeholder text.
disabledbooleanfalseDisable the input.
requiredbooleanfalseRender a small required indicator next to the label.