# FieldArray

> This document is the Markdown version of [formisch.dev/vue/api/FieldArray/](https://formisch.dev/vue/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 scoped slot that receives a field array store to manage array items and handle array operations.

```vue
<FieldArray :of="…" :path="…" v-slot="fieldArray">
  <!-- Use field array store here -->
</FieldArray>
```

## Generics

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

## Properties

- `of` `FormStore<TSchema>`
- `path` `ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>`

## Slots

- `default` - Scoped slot that receives a [`FieldArrayStore`](/vue/api/FieldArrayStore.md) with the reactive state of the array field

### Explanation

The `FieldArray` component is a headless component that doesn't render any UI itself. Instead, it provides a scoped slot that receives a [`FieldArrayStore`](/vue/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

### Composables

[`useForm`](/vue/api/useForm.md), [`useFieldArray`](/vue/api/useFieldArray.md)

### Components

[`Field`](/vue/api/Field.md), [`Form`](/vue/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)