Components

NotField

A renderless component for managing individual field state and validation.

NotField is a renderless component that provides field-specific state and validation methods to its children.

Usage

form.vue

<template>
<NotField name="email" v-slot="{ methods, name, errors }">
  <label :for="name">Email</label>
  <input
    v-model="state.email"
    :id="name"
    :name="name"
    v-bind="methods"
  />
  <span v-if="errors.length" class="error">{{ errors[0] }}</span>
</NotField>
</template>

API

Props

Prop	Type	Default	Description
`name`	`string`	Required	The path to the field in the form state (e.g., `'email'`, `'user.profile.name'`).

Slots

`default`

The default slot provides access to the field's context.

Scope:

Property	Type	Description
`name`	`string`	The field name/path.
`errors`	`string[]`	Active validation messages for this field.
`isValid`	`boolean`	Whether the field is currently valid.
`isDirty`	`boolean`	Whether the field has been modified.
`isTouched`	`boolean`	Whether the field has been focused/blurred.
`methods`	`object`	Event handlers for validation triggers.
`validate`	`() => Promise<StandardSchemaV1.Result<ObjectSchema>>`	Manually trigger validation for this field.

`methods` Scope

Method	Description
`onBlur`	Call when the input loses focus.
`onFocus`	Call when the input gains focus.
`onInput`	Call on every keystroke/input change.
`onChange`	Call when the input value is committed.

Always v-bind="methods" to your input element to ensure validation triggers work as configured in useNotForm.

NotForm

The main wrapper component that provides form context to its children.

NotArrayField

A specialized component for managing dynamic lists of fields with ease.