Composables

useNotForm

The main composable for initializing and managing form state and validation.

useNotForm is the heart of notform . It initializes the form instance with validation logic, reactive state, and lifecycle methods.

Usage

form.vue

<script lang="ts" setup>
import { useNotForm } from 'notform'
import { z } from 'zod'

const { state, id, submit } = useNotForm({
  schema: z.object({
    name: z.string().min(2)
  }),
  onSubmit: async (data) => {
    console.log(data)
  }
})
</script>

API

Options

The useNotForm composable accepts a configuration object as its first argument.

Option	Type	Default	Description
`id`	`string`	`useId()`	Unique form identifier.
`schema`	`MaybeRefOrGetter<TSchema>`	Required	The validation schema (Zod, Valibot, etc.).
`initialState`	`DeepPartial<Input>`	`{}`	Initial values for the form fields.
`initialErrors`	`Issue[]`	`[]`	Initial validation issues to display.
`mode`	`'lazy' \| 'eager'`	`'eager'`	Validation behavioral strategy.
`validateOn`	`ValidationTriggers[]`	`['blur', 'input', 'change']`	Events that trigger field validation.
`onValidate`	`(data: StandardSchemaV1.InferOutput<TSchema>) => boolean \| void \| StandardSchemaV1.Issue[] \| Promise<boolean \| void \| StandardSchemaV1.Issue[]>`	-	Custom validation logic that runs after schema validation
`onReset`	`() => void`	-	Callback triggered when the form is reset.
`onError`	`(errors: StandardSchemaV1.Issue[]) => void`	-	Callback triggered when validation fails.
`onSubmit`	`(data: StandardSchemaV1.InferOutput<TSchema>) => void \| Promise<void>`	-	Callback triggered when validation passes and the form is submitted.

Returns

useNotForm returns a form context object containing reactive state and methods.

State

Property	Type	Description
`id`	`string`	Unique form identifier.
`state`	`Ref<Input>`	Deeply reactive object of field values.
`errors`	`Ref<Issue[]>`	Reactive array of active validation issues.
`isValidating`	`Ref<boolean>`	Reactive status of the async validation process.
`isSubmitting`	`Ref<boolean>`	Reactive status of form submission.
`touchedFields`	`Ref<Set<string>>`	Reactive set of touched field paths.
`dirtyFields`	`Ref<Set<string>>`	Reactive set of dirty field paths.
`isValid`	`ComputedRef<boolean>`	Whether the entire form is valid.
`isTouched`	`ComputedRef<boolean>`	Whether any field has been interacted with.
`isDirty`	`ComputedRef<boolean>`	Whether any field has been modified.