Components

NotArrayField

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

NotArrayField eliminates the complexity of handling dynamic array fields. It provides a set of methods to append, prepend, insert, and remove items while maintaining full validation and type safety.

Usage

form.vue

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

const schema = z.object({
  hobbies: z.array(z.string().min(1, 'Hobby cannot be empty'))
})

const { state, id, submit } = useNotForm({
  schema,
  initialState: { hobbies: ['Coding'] }
})
</script>

<template>
  <NotForm :id="id" @submit="submit">
    <NotArrayField name="hobbies" :schema="schema.shape.hobbies" v-slot="{ fields, append, remove }">
      <div v-for="(field, index) in fields" :key="field.key">
        <NotField :name="`hobbies.${index}`" v-slot="{ methods, name }">
          <input v-model="state.hobbies[index]" v-bind="methods" />
          <NotMessage :name="name" />
        </NotField>
        <button type="button" @click="remove(index)">Remove</button>
      </div>
      <button type="button" @click="append('')">Add Hobby</button>
    </NotArrayField>
  </NotForm>
</template>

API

Props

Prop	Type	Default	Description
`name`	`string`	Required	The path to the array field in the form state.
`schema`	`ArraySchema`	Required	The schema part corresponding to the array (e.g., `schema.shape.hobbies`) - used to provide type inference.

Slots

`default`

The default slot provides the array context for managing items.

Scope:

Property	Type	Description
`fields`	`Array<{key: string \| number, index: number, value: StandardSchemaV1.InferInput<TSchema>[number], first: boolean, last: boolean}>`	List of items in the array.
`append`	`(data: StandardSchemaV1.InferInput<TSchema>[number]) => void`	Adds a new item to the end of the list.
`prepend`	`(data: StandardSchemaV1.InferInput<TSchema>[number]) => void`	Adds a new item to the beginning of the list.
`insert`	`(index: number, data: StandardSchemaV1.InferInput<TSchema>[number]) => void`	Inserts an item at a specific position.
`remove`	`(index: number) => void`	Removes an item at the specified index.
`update`	`(index: number, data: StandardSchemaV1.InferInput<TSchema>[number]) => void`	Replaces data at a specific index.

When using v-for with fields, always use field.key as the :key attribute to ensure Vue correctly tracks DOM elements during array mutations.

NotField

A renderless component for managing individual field state and validation.

NotMessage

A component for automatically displaying validation error messages for a specific field.