NotArrayField

Renderless array wrapper with stable item keys and full mutation methods.

<NotArrayField> manages an array within your form values. It exposes items with stable keys for v-for, array state, and mutation methods through its default slot. Item keys survive reorders, inserts, and removals — elements are not re-mounted unnecessarily.

Props

Prop	Type	Required	Description
`path`	`string`	Yes	Dot-separated path to the array within `form.values`.
`itemSchema`	`StandardSchemaV1`	No	Schema for a single array item. Enables typed `append`, `prepend`, `insert`, and `update` in the slot. Not used for runtime validation.
`validateOn`	`Partial<Record<'onMount' \| 'onChange', boolean>>`	No	Trigger overrides for this array. Only `onMount` and `onChange` are supported — `onBlur`, `onFocus`, and `onInput` are not meaningful at the array level.
`form`	`NotFormInstance<any>`	No	Explicit instance override. Required when used outside of `<NotForm>`.

Slot props — State

Prop	Type	Description
`path`	`string`	The dot-separated path passed to this array field.
`items`	`NotArrayFieldItem[]`	The current items. Each entry has a stable `key`, the current `index`, and the full `path` to pass to a nested `<NotField>`.
`errors`	`StandardSchemaV1.Issue[]`	Validation issues targeting this array path specifically.
`isValid`	`boolean`	`true` when there are no errors for this array.
`isTouched`	`boolean`	`true` if the array path itself or any item path has been touched.
`isDirty`	`boolean`	`true` if the array path itself or any item path is dirty.
`isValidating`	`boolean`	`true` while validation is running for this array.
`validate`	`() => Promise<StandardSchemaV1.Result>`	Manually triggers validation for the array path.

Slot props — Mutation methods

Method	Signature	Description
`append`	`(value: TItem) => void`	Adds an item to the end of the array.
`prepend`	`(value: TItem) => void`	Adds an item to the beginning of the array.
`remove`	`(index: number) => void`	Removes the item at the given index.
`insert`	`(index: number, value: TItem) => void`	Inserts an item at the given index. Subsequent items shift forward.
`update`	`(index: number, value: TItem) => void`	Replaces the value at the given index. The item's stable key is preserved.
`swap`	`(indexA: number, indexB: number) => void`	Swaps two items. Their stable keys move with them.
`move`	`(from: number, to: number) => void`	Moves an item from one index to another. Items between the positions shift to fill the gap.

The `NotArrayFieldItem` type

Property	Type	Description
`key`	`string`	Stable — does not change on reorder.
`index`	`number`	Current position in the array.
`path`	`string`	Full dot-separated path — pass directly to `<NotField>`.

Always use item.key on v-for and item.path as the path prop on nested <NotField> components.

Usage

String array

Typed items with `itemSchema`

Pass itemSchema to make append, prepend, insert, and update typed. Without it they accept any.

<script setup lang="ts">
const itemSchema = z.object({
  name: z.string().min(1),
  role: z.enum([
    'admin',
    'user',
  ]),
})

const form = useNotForm({
  initialValues: { members: [] },
  schema: z.object({ members: z.array(itemSchema) }),
})
</script>

<template>
  <NotForm
    :form="form"
    @submit="form.submit"
  >
    <NotArrayField
      v-slot="{ items, append, remove }"
      path="members"
      :item-schema="itemSchema"
    >
      <!-- TypeScript knows the shape: { name: string; role: 'admin' | 'user' } -->
      <button
        type="button"
        @click="append({ name: '', role: 'user' })"
      >
        Add member
      </button>
    </NotArrayField>
  </NotForm>
</template>

Array-level errors

Issues targeting the array path itself (e.g., minimum length rules) are in errors, separate from individual item errors.

<template>
  <NotArrayField
    v-slot="{ path }"
    path="tags"
  >
    <!-- items -->
    <NotMessage :path="path" />
  </NotArrayField>
</template>

NotMessage

Renders the first validation error for a field. Renders nothing when there is no error.

useNotForm

Creates and returns a fully typed, reactive form instance.