Form
Render a native form element wired to a useForm instance for submit and reset.
Form renders a native <form> and connects it to the instance returned by useForm. It is a thin wrapper: it adds no validation of its own.
Usage
<script setup lang="ts">
import { Form, useForm } from 'notform'
import { z } from 'zod'
const form = useForm({
initialValues: { email: '' },
onSubmit: (data) => {
return console.log(data)
},
schema: z.object({ email: z.email() }),
})
</script>
<template>
<Form
:form="form"
novalidate
class="stack"
>
<!-- fields -->
<button
type="submit"
:disabled="form.isSubmitting"
>
Submit
</button>
<button type="reset">
Reset
</button>
</Form>
</template>
Props
form
UseFormInstance<TSchema> required
The form instance returned by
useForm.Slots
| Slot | Props | Description |
|---|---|---|
default | none | The form's contents. Read state from the form instance you created. |
Behavior
| Native event | What Form does |
|---|---|
submit | Calls form.submit(event), which prevents the browser's page navigation, validates the whole form, and calls onSubmit only when valid. |
reset | Prevents the browser's native value reset and calls form.reset(), restoring the baseline values and errors. |
Attributes
Attributes such as id, class, novalidate, and aria-* are forwarded to the native <form> element. Add novalidate when you want your schema, not the browser, to produce validation messages.
Form does not provide context
Form does not share the form instance with descendants, and fields do not look it up. Create each field from the instance and pass it explicitly:
<template>
<Form :form>
<Field
v-slot="{ field }"
:field="form.field('email')"
>
...
</Field>
<ArrayField
v-slot="{ arrayField }"
:array-field="form.arrayField('tags')"
>
...
</ArrayField>
</Form>
</template>
This is what keeps every field fully typed. It also means a field can be created and used anywhere, including outside Form.
Using a plain form element
Form is optional. A native <form> with two handlers is equivalent:
<form @submit="form.submit" @reset.prevent="form.reset">
<!-- fields -->
</form>