Form

1<script setup lang="ts">2import { Checkbox, Form, InputNumber, InputPassword, InputText, rules, StackPanel, type FormSubmitEvent } from '@vitral/vue';3import { ref } from 'vue';4 5const signUp = ref({ name: '', email: '', password: '', confirm: '', website: '', age: null, terms: false });6const result = ref('');7 8function onSubmit(event: FormSubmitEvent) {9    result.value = event.valid ? JSON.stringify(event.values, null, 2) : `${Object.keys(event.errors).length} field(s) to fix`;10}11</script>12 13<template>14    <Form.Root v-model="signUp" aria-label="Sign up" style="width: 100%; max-width: 26rem" @submit="onSubmit">15        <Form.Field name="name" label="Full name" required :rules="rules.minLength(2)">16            <InputText autocomplete="name" fluid />17        </Form.Field>18        <Form.Field name="email" label="Email" description="We send the confirmation here." required :rules="rules.email()">19            <InputText type="email" autocomplete="email" fluid />20        </Form.Field>21        <Form.Field name="password" label="Password" required :rules="rules.minLength(8)">22            <InputPassword autocomplete="new-password" toggle-mask fluid />23        </Form.Field>24        <Form.Field name="confirm" label="Repeat the password" required :rules="rules.equalsField('password')">25            <InputText type="password" autocomplete="new-password" fluid />26        </Form.Field>27        <Form.Field name="website" label="Website" :rules="rules.url()">28            <InputText type="url" placeholder="https://" fluid />29        </Form.Field>30        <Form.Field name="age" label="Age" required :rules="[rules.min(18, 'You have to be 18 or older.'), rules.max(120)]">31            <InputNumber :use-grouping="false" />32        </Form.Field>33        <Form.Field name="terms" :rules="rules.required('Accept the terms to go on.')">34            <Checkbox label="I accept the terms of use" />35        </Form.Field>36        <StackPanel orientation="horizontal" spacing="0.5rem" align="center" wrap>37            <Form.Submit label="Create account" />38            <Form.Reset label="Start over" />39        </StackPanel>40    </Form.Root>41    <pre v-if="result" class="demo-output" style="margin: 0; font-size: 0.75rem">{{ result }}</pre>42</template>

1<script setup lang="ts">2import { Form, InputText, rules } from '@vitral/vue';3import { ref } from 'vue';4 5const onBlurResult = ref('');6const onSubmitResult = ref('');7</script>8 9<template>10    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; width: 100%">11        <Form.Root :initial-values="{ email: '' }" validate-on="blur" aria-label="Checked on blur" @submit="(e) => (onBlurResult = e.valid ? 'Sent' : 'Fix the address')">12            <Form.Field name="email" label="Email (checked on blur)" required :rules="rules.email()">13                <InputText type="email" fluid />14            </Form.Field>15            <Form.Submit label="Send" severity="secondary" />16            <small style="color: var(--vt-text-muted-color)" aria-live="polite">{{ onBlurResult }}</small>17        </Form.Root>18        <Form.Root :initial-values="{ email: '' }" aria-label="Checked on submit" @submit="(e) => (onSubmitResult = e.valid ? 'Sent' : 'Fix the address')">19            <Form.Field name="email" label="Email (checked on submit)" required :rules="rules.email()">20                <InputText type="email" fluid />21            </Form.Field>22            <Form.Submit label="Send" severity="secondary" />23            <small style="color: var(--vt-text-muted-color)" aria-live="polite">{{ onSubmitResult }}</small>24        </Form.Root>25    </div>26</template>

1<script setup lang="ts">2import { Form, InputNumber, InputText, zodResolver, type FormSubmitEvent } from '@vitral/vue';3import { ref } from 'vue';4 5// No schema library is installed here, so this is a tiny hand-written schema6// with the shape Zod's has: `safeParse` returning issues with paths, which is7// all `zodResolver` asks for.8interface Profile {9    handle: string;10    site: string;11    from: number | null;12    to: number | null;13}14const profileSchema = {15    safeParse(input: unknown) {16        const value = input as Profile;17        const issues: { path: (string | number)[]; message: string }[] = [];18        const handle = value.handle.trim().toLowerCase();19        if (!/^[a-z0-9_]{3,15}$/.test(handle)) issues.push({ path: ['handle'], message: 'Use 3 to 15 letters, digits or underscores.' });20        if (value.site && !value.site.startsWith('https://')) issues.push({ path: ['site'], message: 'Use an https:// address.' });21        if (value.from == null) issues.push({ path: ['from'], message: 'Enter the first year.' });22        if (value.from != null && value.to != null && value.to < value.from) issues.push({ path: ['to'], message: 'The last year comes after the first.' });23        return issues.length ? { success: false as const, error: { issues } } : { success: true as const, data: { ...value, handle } };24    }25};26const resolver = zodResolver(profileSchema);27const profile = ref<Profile>({ handle: '', site: '', from: null, to: null });28const result = ref('');29 30function onSubmit(event: FormSubmitEvent) {31    result.value = event.valid ? JSON.stringify(event.values, null, 2) : `${Object.keys(event.errors).length} field(s) to fix`;32}33</script>34 35<template>36    <Form.Root v-model="profile" :resolver="resolver" aria-label="Profile" style="width: 100%; max-width: 26rem" @submit="onSubmit">37        <Form.Field name="handle" label="Handle">38            <InputText fluid>39                <template #prefix>@</template>40            </InputText>41        </Form.Field>42        <Form.Field name="site" label="Site">43            <InputText type="url" placeholder="https://" fluid />44        </Form.Field>45        <div style="display: flex; gap: 1rem">46            <Form.Field name="from" label="Active since">47                <InputNumber :use-grouping="false" />48            </Form.Field>49            <Form.Field name="to" label="Until">50                <InputNumber :use-grouping="false" />51            </Form.Field>52        </div>53        <Form.Submit label="Save profile" />54    </Form.Root>55    <pre v-if="result" class="demo-output" style="margin: 0; font-size: 0.75rem">{{ result }}</pre>56</template>

1<script setup lang="ts">2import { Form, InputText, rules, type FormSubmitEvent } from '@vitral/vue';3import { ref } from 'vue';4 5// A fake server that takes a moment to answer.6const takenNames = ['admin', 'root', 'vitral', 'ada', 'grace'];7 8function wait(ms: number, signal: AbortSignal) {9    return new Promise<void>((resolve, reject) => {10        const timer = setTimeout(resolve, ms);11        signal.addEventListener('abort', () => {12            clearTimeout(timer);13            reject(new DOMException('Superseded', 'AbortError'));14        });15    });16}17 18const available = rules.custom<string>(async (value, { signal }) => {19    if (!value) return true;20    await wait(700, signal);21    return !takenNames.includes(value.toLowerCase()) || `“${value}” is taken. Try another.`;22});23const usernameRules = [rules.required(), rules.pattern(/^[a-z0-9_]+$/i, 'Use letters, digits or underscores.'), available];24const result = ref('');25 26function onSubmit(event: FormSubmitEvent) {27    result.value = event.valid ? JSON.stringify(event.values, null, 2) : `${Object.keys(event.errors).length} field(s) to fix`;28}29</script>30 31<template>32    <Form.Root :initial-values="{ username: '' }" validate-on="input" aria-label="Choose a username" style="width: 100%; max-width: 26rem" @submit="onSubmit">33        <Form.Field v-slot="{ validating, invalid, value }" name="username" label="Username" :rules="usernameRules" :debounce="300">34            <InputText autocomplete="username" fluid />35            <small style="color: var(--vt-text-muted-color)" aria-live="polite">{{ validating ? 'Checking…' : value && !invalid ? 'Available.' : '' }}</small>36        </Form.Field>37        <Form.Submit label="Claim it" />38    </Form.Root>39    <pre v-if="result" class="demo-output" style="margin: 0; font-size: 0.75rem">{{ result }}</pre>40</template>

1<script setup lang="ts">2import { Button, Form, InputText, rules, type FormSubmitEvent } from '@vitral/vue';3import { ref } from 'vue';4 5const trip = ref({ title: 'Team offsite', guests: [{ name: 'Ada Lovelace', email: 'ada@example.com' }, { name: '', email: '' }] });6const result = ref('');7 8function onSubmit(event: FormSubmitEvent) {9    result.value = event.valid ? JSON.stringify(event.values, null, 2) : `${Object.keys(event.errors).length} field(s) to fix`;10}11</script>12 13<template>14    <Form.Root v-model="trip" aria-label="Trip" style="width: 100%; max-width: 40rem" @submit="onSubmit">15        <Form.Field name="title" label="Trip" required>16            <InputText fluid />17        </Form.Field>18        <Form.FieldArray v-slot="{ fields, append, remove, move }" name="guests" label="Guests" :rules="rules.minLength(1, 'Add at least one guest.')">19            <div v-for="guest in fields" :key="guest.key" style="display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem">20                <Form.Field :name="`${guest.name}.name`" :label="`Guest ${guest.index + 1}`" required>21                    <InputText autocomplete="off" />22                </Form.Field>23                <Form.Field :name="`${guest.name}.email`" :label="`Email of guest ${guest.index + 1}`" required :rules="rules.email()">24                    <InputText type="email" autocomplete="off" />25                </Form.Field>26                <div style="display: flex; gap: 0.25rem; padding-top: 1.4rem">27                    <Button icon="arrowUp" variant="text" severity="secondary" :disabled="guest.first" :aria-label="`Move guest ${guest.index + 1} up`" @click="move(guest.index, guest.index - 1)" />28                    <Button icon="arrowDown" variant="text" severity="secondary" :disabled="guest.last" :aria-label="`Move guest ${guest.index + 1} down`" @click="move(guest.index, guest.index + 1)" />29                    <Button icon="trash" variant="text" severity="danger" :aria-label="`Remove guest ${guest.index + 1}`" @click="remove(guest.index)" />30                </div>31            </div>32            <Form.Message />33            <div>34                <Button label="Add a guest" icon="plus" variant="outlined" severity="secondary" @click="append({ name: '', email: '' })" />35            </div>36        </Form.FieldArray>37        <Form.Submit label="Book" />38    </Form.Root>39    <pre v-if="result" class="demo-output" style="margin: 0; font-size: 0.75rem">{{ result }}</pre>40</template>

1<script setup lang="ts">2import { DatePicker, Form, InputText, RadioButton, RadioGroup, rules, Select, type FormSubmitEvent } from '@vitral/vue';3import { ref } from 'vue';4 5const today = new Date();6const countries = [7    { name: 'Brazil', code: 'BR' },8    { name: 'Portugal', code: 'PT' },9    { name: 'Angola', code: 'AO' }10];11const result = ref('');12 13function onSubmit(event: FormSubmitEvent) {14    result.value = event.valid ? JSON.stringify(event.values, null, 2) : `${Object.keys(event.errors).length} field(s) to fix`;15}16</script>17 18<template>19    <Form.Root :initial-values="{ fullName: '', email: '', born: null, country: null, plan: null }" aria-label="Application" style="width: 100%; max-width: 30rem" @submit="onSubmit">20        <Form.Summary />21        <Form.Field name="fullName" label="Full name" required>22            <InputText autocomplete="name" fluid />23        </Form.Field>24        <Form.Field name="email" label="Email" required :rules="rules.email()">25            <InputText type="email" autocomplete="email" fluid />26        </Form.Field>27        <Form.Field name="born" label="Date of birth" description="For example, 27/03/1990." required :rules="rules.max(today, 'The date has to be in the past.')">28            <DatePicker />29        </Form.Field>30        <Form.Field name="country" label="Country" required>31            <Select :options="countries" option-label="name" option-value="code" placeholder="Choose a country" fluid />32        </Form.Field>33        <Form.Field name="plan" label="Plan" required>34            <RadioGroup orientation="horizontal">35                <RadioButton value="basic" label="Basic" />36                <RadioButton value="team" label="Team" />37            </RadioGroup>38        </Form.Field>39        <Form.Submit label="Apply" />40    </Form.Root>41    <pre v-if="result" class="demo-output" style="margin: 0; font-size: 0.75rem">{{ result }}</pre>42</template>

1<script setup lang="ts">2import {3    AutoComplete,4    CascadeSelect,5    Checkbox,6    ColorPicker,7    DatePicker,8    Editor,9    Form,10    InputMask,11    InputNumber,12    InputOtp,13    InputPassword,14    InputText,15    Knob,16    Listbox,17    MultiSelect,18    RadioButton,19    RadioGroup,20    Rating,21    rules,22    Select,23    SelectButton,24    Slider,25    Textarea,26    ToggleButton,27    ToggleSwitch,28    TreeSelect,29    type FormSubmitEvent,30    type TreeNode31} from '@vitral/vue';32import { ref } from 'vue';33 34const cities = [35    { name: 'Recife', code: 'REC' },36    { name: 'Salvador', code: 'SSA' },37    { name: 'Lisboa', code: 'LIS' },38    { name: 'Luanda', code: 'LAD' }39];40const citySuggestions = ref<string[]>([]);41const matchCity = (query: string) => (citySuggestions.value = cities.map((c) => c.name).filter((name) => name.toLowerCase().includes(query.toLowerCase())));42const menu = [43    { label: 'Coffee', items: [{ label: 'Espresso' }, { label: 'Filter' }] },44    { label: 'Tea', items: [{ label: 'Green' }, { label: 'Black' }] }45];46const files: TreeNode[] = [47    { key: 'docs', label: 'Documents', children: [{ key: 'cv', label: 'CV.pdf' }, { key: 'letter', label: 'Letter.docx' }] },48    { key: 'photos', label: 'Photos', children: [{ key: 'beach', label: 'Beach.jpg' }] }49];50const everything = ref({51    text: '',52    notes: '',53    amount: null,54    phone: '',55    code: '',56    secret: '',57    city: null,58    cities: [],59    search: '',60    drink: null,61    file: null,62    listed: null,63    agree: false,64    size: null,65    alerts: false,66    pinned: false,67    view: null,68    volume: 0,69    stars: null,70    level: 0,71    color: null,72    date: null,73    story: ''74});75const result = ref('');76const positive = rules.custom<number | null>((v) => (v ?? 0) > 0, 'Move it above zero.');77// The editor's value is HTML: an empty paragraph is still empty.78const hasText = rules.custom<string>((html) => !!html?.replace(/<[^>]*>/g, '').trim(), 'Write a few words.');79 80function onSubmit(event: FormSubmitEvent) {81    result.value = event.valid ? JSON.stringify(event.values, null, 2) : `${Object.keys(event.errors).length} field(s) to fix`;82}83</script>84 85<template>86    <Form.Root v-model="everything" aria-label="Every control" style="width: 100%" @submit="onSubmit">87        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem 1.5rem; align-items: start">88            <Form.Field name="text" label="InputText" required>89                <InputText fluid />90            </Form.Field>91            <Form.Field name="amount" label="InputNumber" required>92                <InputNumber mode="currency" currency="BRL" locale="pt-BR" fluid />93            </Form.Field>94            <Form.Field name="phone" label="InputMask" required>95                <InputMask mask="(99) 99999-9999" fluid />96            </Form.Field>97            <Form.Field name="code" label="InputOtp" required :rules="rules.minLength(4, 'Enter all four digits.')">98                <InputOtp :length="4" integer-only />99            </Form.Field>100            <Form.Field name="secret" label="Password" required>101                <InputPassword :feedback="false" toggle-mask fluid />102            </Form.Field>103            <Form.Field name="city" label="Select" required>104                <Select :options="cities" option-label="name" option-value="code" placeholder="Choose" fluid />105            </Form.Field>106            <Form.Field name="cities" label="MultiSelect" required>107                <MultiSelect :options="cities" option-label="name" option-value="code" placeholder="Choose some" fluid />108            </Form.Field>109            <Form.Field name="search" label="AutoComplete" required>110                <AutoComplete :suggestions="citySuggestions" fluid @complete="matchCity($event.query)" />111            </Form.Field>112            <Form.Field name="drink" label="CascadeSelect" required>113                <CascadeSelect :options="menu" option-label="label" option-group-label="label" placeholder="Pick a drink" fluid />114            </Form.Field>115            <Form.Field name="file" label="TreeSelect" required>116                <TreeSelect :options="files" placeholder="Pick a file" fluid />117            </Form.Field>118            <Form.Field name="date" label="DatePicker" required>119                <DatePicker fluid />120            </Form.Field>121            <Form.Field name="color" label="ColorPicker" required>122                <ColorPicker />123            </Form.Field>124            <Form.Field name="listed" label="Listbox" required>125                <Listbox :options="cities" option-label="name" option-value="code" scroll-height="9rem" />126            </Form.Field>127            <Form.Field name="notes" label="Textarea" required>128                <Textarea :rows="3" fluid />129            </Form.Field>130            <Form.Field name="size" label="RadioGroup" required>131                <RadioGroup>132                    <RadioButton value="s" label="Small" />133                    <RadioButton value="l" label="Large" />134                </RadioGroup>135            </Form.Field>136            <Form.Field name="view" label="SelectButton" required>137                <SelectButton :options="['Day', 'Week', 'Month']" />138            </Form.Field>139            <Form.Field name="agree" required>140                <Checkbox label="Checkbox" />141            </Form.Field>142            <Form.Field name="alerts" label="ToggleSwitch" :rules="rules.required('Turn it on.')">143                <ToggleSwitch />144            </Form.Field>145            <Form.Field name="pinned" label="ToggleButton" :rules="rules.required('Press it.')">146                <ToggleButton on-label="Pinned" off-label="Pin" />147            </Form.Field>148            <Form.Field name="stars" label="Rating" required>149                <Rating />150            </Form.Field>151            <Form.Field name="volume" label="Slider" :rules="positive">152                <Slider style="width: 100%" />153            </Form.Field>154            <Form.Field name="level" label="Knob" :rules="positive">155                <Knob :size="96" />156            </Form.Field>157            <Form.Field name="story" label="Editor" required :rules="hasText" style="grid-column: 1 / -1">158                <Editor :toolbar="[['bold', 'italic'], ['bulletList', 'link']]" style="width: 100%" />159            </Form.Field>160        </div>161        <div style="display: flex; gap: 0.5rem">162            <Form.Submit label="Submit everything" />163            <Form.Reset label="Reset" />164        </div>165    </Form.Root>166    <pre v-if="result" class="demo-output" style="margin: 0; font-size: 0.75rem; max-height: 16rem; overflow: auto; width: 100%" tabindex="0" aria-label="Submitted values">{{ result }}</pre>167</template>

1<script setup lang="ts">2import { createForm, rules, type FormApi } from '@vitral/forms';3import { StackPanel } from '@vitral/vue';4import { onBeforeUnmount, onMounted, ref } from 'vue';5 6// No framework here: `@vitral/forms` is the form's state and its rules, and7// nothing else. It holds no elements and draws nothing — this function binds it8// to three plain inputs by hand, which is all a React or an Angular adapter9// does either. Vue only gives it an element to draw into.10interface Signup {11    email: string;12    password: string;13    confirm: string;14}15 16function mountSignupForm(element: HTMLElement, onSubmit: (text: string) => void): FormApi<Signup> {17    const form = createForm<Signup>({18        initialValues: { email: '', password: '', confirm: '' },19        // A field is checked as it is left, and everything is checked on submit.20        validateOn: 'blur'21    });22 23    form.register('email', { label: 'Email', rules: [rules.required(), rules.email()] });24    form.register('password', { label: 'Password', rules: [rules.required(), rules.minLength(8)] });25    form.register('confirm', { label: 'Repeat the password', rules: [rules.required(), rules.equalsField('password')], deps: ['password'] });26 27    element.innerHTML = `28        <form novalidate class="signup-form" aria-label="Sign up">29            ${['email', 'password', 'confirm']30                .map(31                    (name) => `32                <div class="signup-field">33                    <label for="vf-${name}">${form.labelOf(name)}</label>34                    <input id="vf-${name}" name="${name}" type="${name === 'email' ? 'email' : 'password'}"35                           class="vt-field vt-field-input" aria-describedby="vf-${name}-error" />36                    <small id="vf-${name}-error" class="signup-error" role="alert"></small>37                </div>`38                )39                .join('')}40            <button type="submit" class="vt-button">Create the account</button>41        </form>`;42 43    const inputs = [...element.querySelectorAll<HTMLInputElement>('input')];44    for (const input of inputs) {45        input.addEventListener('input', () => form.setValue(input.name, input.value));46        input.addEventListener('blur', () => form.blur(input.name));47    }48 49    // The form says what changed; the page decides what that looks like.50    form.subscribe((state) => {51        for (const input of inputs) {52            const error = state.validated[input.name] ? form.getError(input.name) : undefined;53            input.setAttribute('aria-invalid', error ? 'true' : 'false');54            element.querySelector(`#vf-${input.name}-error`)!.textContent = error ?? '';55        }56    });57 58    element.querySelector('form')!.addEventListener('submit', (event) => {59        event.preventDefault();60        void form.submit(61            (values) => onSubmit(`Submitted ${values.email}`),62            () => onSubmit('Nothing was submitted: fix the fields above.')63        );64    });65 66    return form;67}68 69const host = ref<HTMLElement | null>(null);70const said = ref('Nothing submitted yet.');71let form: FormApi<Signup> | null = null;72 73onMounted(() => (form = mountSignupForm(host.value!, (text) => (said.value = text))));74onBeforeUnmount(() => form?.destroy());75</script>76 77<template>78    <StackPanel spacing="1rem" style="width: 100%">79        <div ref="host" style="width: 100%; max-width: 26rem" />80        <small style="color: var(--vt-text-muted-color)">{{ said }}</small>81    </StackPanel>82</template>83 84<!-- Not scoped: these elements are written by the function above, not by the template. -->85<style>86.signup-form {87    display: grid;88    gap: 0.875rem;89    justify-items: start;90}91 92.signup-field {93    display: grid;94    gap: 0.375rem;95    width: 100%;96}97 98.signup-field > label {99    font-size: 0.8125rem;100    font-weight: 500;101}102 103.signup-error {104    font-size: 0.75rem;105    min-height: 1em;106    color: var(--vt-danger-color);107}108</style>