createForm
Coordinates validation across multiple inputs. Provides submit(), reset(), and aggregate validity state.
Usage
Creating a Form
Create a form and register validation contexts. Each validation owns its rules for a single input:
import { createForm, createValidation } from '@vuetify/v0'
import { shallowRef } from 'vue'
const form = createForm()
const email = shallowRef('')
const validation = createValidation({
value: email,
rules: ['required', 'email'],
})
form.register({ value: validation })
await form.submit()
console.log(validation.errors.value) // ['Required']
form.reset()Auto-Registration
When a createValidation instance is created inside a component that has a parent form context, it auto-registers with the form — no manual form.register() needed:
<script setup lang="ts">
import { createValidation } from '@vuetify/v0'
import { shallowRef } from 'vue'
// Parent provides form context — this validation auto-registers
const email = shallowRef('')
const validation = createValidation({
value: email,
rules: ['required', 'email'],
})
</script>Disabled and Readonly
The form exposes disabled and readonly as reactive refs. Components can read these to conditionally disable inputs:
const form = createForm({ disabled: true })
form.disabled.value = false // Toggle at runtimeInjecting a Form Context
Use useForm to inject an existing form context provided by a parent component:
import { useForm } from '@vuetify/v0'
const form = useForm() // Returns undefined if no parent formContext / DI
Use createFormContext to share a form instance across a component tree:
import { createFormContext } from '@vuetify/v0'
export const [useContactForm, provideContactForm, contactForm] =
createFormContext({ namespace: 'app:contact-form' })
// In parent component (e.g., ContactForm.vue)
provideContactForm()
// In any child component (e.g., submit button, field)
const form = useContactForm()
await form.submit()Validations inside the component tree auto-register with the provided form — no manual form.register() needed.
Architecture
createForm is a pure registry. Validations register with it for coordination:
Options
| Option | Type | Default | Notes |
|---|---|---|---|
disabled | MaybeRefOrGetter<boolean> | false | When truthy, child components should disable interaction. Read via form.disabled |
readonly | MaybeRefOrGetter<boolean> | false | When truthy, child components should prevent editing. Read via form.readonly |
Reactivity
Form-level state is fully reactive.
| Property/Method | Reactive | Notes |
|---|---|---|
isValid | Computed from all registered validations | |
isValidating | Computed from all registered validations | |
disabled | ShallowRef, read by components | |
readonly | ShallowRef, read by components |
Examples
FAQ
createForm is a pure registry of validations and never holds field values. reset() only re-arms each validation to null; clear your own value object separately.
No. A createValidation created inside a component with a parent form context auto-registers (and cleans up on unmount). Manual form.register({ value }) is only needed for validations built outside the provided tree.
It’s tri-state: null until the first submit(), then true when every registered validation passes or false when any fails.
It runs every registered validation in parallel and resolves to a boolean — true only when all pass. form.isValidating is true while async rules are in flight, so bind the submit button’s disabled state to it.
createForm is headless — form.disabled and form.readonly are advisory reactive refs. Child components must read them and disable or guard their own inputs; the form never touches the DOM itself.