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
path
string required
Dot-separated path to the array within
form.values.itemSchema
StandardSchemaV1
Schema for a single array item. Used only for TypeScript inference — it enables typed
append, prepend, insert, and update in the slot. Not used for runtime validation.validateOn
Partial<Record<'onMount' | 'onChange', boolean>>
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>
Explicit instance override. Required when used outside of
<NotForm>.Slot props
State
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.
Mutation methods
append(value)
(value: TItem) => void
Adds an item to the end of the array.
prepend(value)
(value: TItem) => void
Adds an item to the beginning of the array.
remove(index)
(index: number) => void
Removes the item at the given index.
insert(index, value)
(index: number, value: TItem) => void
Inserts an item at the given index. Subsequent items shift forward.
update(index, value)
(index: number, value: TItem) => void
Replaces the value at the given index. The item's stable key is preserved.
swap(indexA, indexB)
(indexA: number, indexB: number) => void
Swaps two items. Their stable keys move with them.
move(from, to)
(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
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({
schema: z.object({ members: z.array(itemSchema) }),
initialValues: { members: [] },
})
</script>
<template>
<NotForm :form="form" @submit="form.submit">
<NotArrayField path="members" :item-schema="itemSchema" v-slot="{ items, append, remove }">
<!-- 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 path="tags" v-slot="{ path }">
<!-- items -->
<NotMessage :path="path" />
</NotArrayField>
</template>