# FieldArray

> This document is the Markdown version of [formisch.dev/svelte/api/FieldArray/](https://formisch.dev/svelte/api/FieldArray/). For the complete documentation index, see [llms.txt](https://formisch.dev/llms.txt).

Headless field array component that provides reactive properties and state for managing array fields. The field array component takes a form store, path to array field, and a snippet that receives a field array store to manage array items and handle array operations.

```svelte
<FieldArray of={…} path={…}>children</FieldArray>
```

## Generics

- `TSchema` `extends FormSchema`
- `TFieldArrayPath` `extends RequiredPath`

## Properties

- `of` `FormStore<TSchema>`
- `path` `ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>`
- `children` `Snippet<[FieldArrayStore<TSchema, TFieldArrayPath>]>`

### Explanation

The `FieldArray` component is a headless component that doesn't render any UI itself. Instead, it accepts a `children` snippet and invokes it with a [`FieldArrayStore`](/svelte/api/FieldArrayStore.md) containing the reactive state of the array field, such as its item IDs and validation errors. The items themselves are manipulated with the form methods listed below.

The component automatically handles array field registration, validation, and state management through the `of` prop that references the form store.

## Related

### Runes

[`createForm`](/svelte/api/createForm.md), [`useFieldArray`](/svelte/api/useFieldArray.md)

### Components

[`Field`](/svelte/api/Field.md), [`Form`](/svelte/api/Form.md)

### Methods

[`insert`](/methods/api/insert.md), [`move`](/methods/api/move.md), [`remove`](/methods/api/remove.md), [`replace`](/methods/api/replace.md), [`swap`](/methods/api/swap.md)