NotForm

<NotForm> renders a native <form> element and makes the instance available to all descendant <NotField>, <NotMessage>, and <NotArrayField> components through Vue's provide/inject. Any attribute you pass is forwarded to the underlying <form>.

Props

Slots

Usage

Basic

<template>
  <NotForm :form="form" @submit="form.submit">
    <!-- fields and submit button -->
  </NotForm>
</template>

With reset

Bind the native reset event to form.reset() to clear all values, errors, and tracking state when the user clicks a reset button.

<template>
  <NotForm :form="form" @submit="form.submit" @reset="form.reset()">
    <!-- ... -->
    <button type="reset">Clear</button>
  </NotForm>
</template>

Forwarding attributes

Any attribute or listener passes through to the <form> element.

<template>
  <NotForm
    :form="form"
    @submit="form.submit"
    class="space-y-4"
    novalidate
    autocomplete="off"
  />
</template>

Without <NotForm>

You do not need <NotForm> if you pass the instance directly to each component via :form. This is the singleton pattern — useful when a field lives outside a form context.

<template>
  <div>
    <NotField :form="form" path="email" v-slot="{ events }">
      <input v-model="form.values.email" v-bind="events" />
    </NotField>
    <NotMessage :form="form" path="email" />
  </div>
</template>

When :form is passed directly, it always takes priority over a <NotForm> ancestor.