UI libraries

form.bind(path) returns modelValue, onUpdate:modelValue and onBlur — what most UI library fields accept. Pass the error to the component's error prop — each library names it differently.

Element Plus

<el-form-item :error="form.errors.email">
  <el-input v-bind="form.bind('email')" />
</el-form-item>

Vuetify

<v-text-field v-bind="form.bind('email')" :error-messages="form.errors.email" />

PrimeVue

<InputText v-bind="form.bind('email')" :invalid="!!form.errors.email" />
<Message v-if="form.errors.email" severity="error">{{ form.errors.email }}</Message>

Naive UI

<n-form-item :feedback="form.errors.email" :validation-status="form.errors.email ? 'error' : undefined">
  <n-input v-bind="form.bind('email')" />
</n-form-item>

Your own field component

To avoid repeating markup, build a component on useField — it sets name and accessibility attributes for you:

<!-- FormField.vue -->
<script setup lang="ts">
import { useField, type Form } from 'tinyval-vue';

const props = defineProps<{ form: Form<any, any>; path: string; label: string }>();
const { value, error, attrs, errorId } = useField<string>(props.form, () => props.path);
</script>

<template>
  <label class="field">
    {{ label }}
    <input v-model="value" v-bind="{ ...attrs, ...$attrs }" />
    <span v-if="error" :id="errorId" class="field__error">{{ error }}</span>
  </label>
</template>

<FormField :form="form" path="email" label="Email" type="email" />

See also

• useForm — bind and other methods