Form fields
Form fields give strings, not numbers or dates. So the schema depends on what exactly v-model puts into the value.
What each field gives
| Field | What v-model gives | Schema |
|---|---|---|
<input>, <textarea> | 'text' or '' | string() |
<input> with a number | '42' or '' | coerce.number() |
<input v-model.number> | 42 or '' | number() |
<input type="date"> | '2026-10-02' or '' | coerce.date() |
<input type="checkbox"> | true / false | boolean(), consent — literal(true) |
<input type="radio">, <select> | the selected option value | oneOf([...]) |
<select multiple>, checkbox group | an array of values | array(oneOf([...])) |
An empty field gives '', and tinyval treats the empty string as a missing value — see Empty values. So required fields and optional work with inputs out of the box.
Example: a profile form
<script setup lang="ts">
import { object, string, optional, pipe, coerce, integer, min, minLength, oneOf, array, literal, check } from 'tinyval';
import { useForm } from 'tinyval-vue';
const Profile = object({
name: string(),
age: optional(pipe(coerce.number(), integer(), min(14))),
birthday: pipe(coerce.date(), check((d) => d < new Date())),
city: oneOf(['moscow', 'spb', 'other']),
interests: pipe(array(oneOf(['js', 'php', 'go'])), minLength(1)),
terms: literal(true),
});
const form = useForm(Profile, {
initial: { name: '', age: '', birthday: '', city: '', interests: [] as string[], terms: false },
});
</script>
<template>
<input v-model="form.values.name" @blur="form.touch('name')" />
<input v-model="form.values.age" inputmode="numeric" @blur="form.touch('age')" />
<input v-model="form.values.birthday" type="date" @blur="form.touch('birthday')" />
<select v-model="form.values.city" @blur="form.touch('city')">
<option value="" disabled>—</option>
<option value="moscow">Moscow</option>
<option value="spb">Saint Petersburg</option>
<option value="other">Other</option>
</select>
<label v-for="i in ['js', 'php', 'go']" :key="i">
<input v-model="form.values.interests" type="checkbox" :value="i" @change="form.touch('interests')" /> {{ i }}
</label>
<label>
<input v-model="form.values.terms" type="checkbox" @change="form.touch('terms')" /> I accept the terms
</label>
</template>handleSubmit receives converted values: age is a number, birthday is a Date.
Nested fields and arrays
Error paths match the paths in values. For lists use useFieldArray — it gives stable keys for v-for and doesn't mix up row errors on removal:
<script setup lang="ts">
const items = useFieldArray<{ title: string }>(form, 'items');
</script>
<template>
<div v-for="field in items.fields.value" :key="field.key">
<input v-model="field.value.title" :name="`${field.path}.title`" @blur="form.touch(`${field.path}.title`)" />
<span>{{ form.errors[`${field.path}.title`] }}</span>
<button type="button" @click="items.remove(field.index)">×</button>
</div>
<button type="button" @click="items.append({ title: '' })">+</button>
</template>Masks
Phones, cards, amounts and dates are easier to type with a mask — the tinyval-mask package. The v-mask directive works on <input>, on <TvField> and on UI library fields; the mask can be removed before validation in the schema — see Vue in tinyval-mask.
<!-- the form gets 79991234567, the field shows +7 (999) 123-45-67 -->
<TvField name="phone" v-mask.raw="{ mask: phoneMask, placeholder: '_' }" inputmode="tel" />Files
tinyval has no file schema yet. A file can be checked with createSchema or check. <input type="file"> doesn't work with v-model, so put the value into the form manually:
<script setup lang="ts">
const avatar = pipe(
unknown(),
check((f) => f instanceof File, 'Choose a file'),
check((f) => (f as File).size <= 2 * 1024 * 1024, 'Max 2 MB'),
);
</script>
<template>
<input type="file" accept="image/*" @change="form.values.avatar = ($event.target as HTMLInputElement).files?.[0] ?? null" />
</template>