DOM Studio

Component

Vue Text Input Component

<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
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomTextInput } from '@getdom/studio';

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

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.