> Markdown version of [Binding Arrays](https://vaadin.com/docs/latest/hilla/lit/guides/forms/binding-arrays). Section index: [llms.txt](https://vaadin.com/docs/latest/hilla/llms.txt)

# Binding Arrays

This page explains working with arrays when building TypeScript form views using form binding. Consider a form for a Java bean that has this structure:

`Group.java`

```java
/**
 * Example bean with array field
 */
public class Group {
    ...

    public Person[] getPeople() {
        ...
    }

    public void setPeople(Person[] people) {
        ...
    }
}
```

## <a id="repeating-the-array-item-template"></a>Repeating the Array Item Template

A common need when working with arrays is to iterate over the items and stamp a template for each item. With form binding, array models are iterable. You can use the `useFormArrayPart` hook to iterate over the model and to get and set the value of the array.

As you also need to get the `field` function for each item using the `useFormPart` hook, you need to create a component for the array item template.

Try using a `repeat` directive to loop through the items and stamp the item templates.

```typescript
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';

import { repeat } from 'lit/directives/repeat.js';

import { Binder, field } from '@vaadin/hilla-lit-form';

import GroupModel from '.../GroupModel';

@customElement('group-form-view')
class GroupFormView extends LitElement {
  binder = new Binder(this, GroupModel);

  render() {
    return html`
      ${repeat(this.binder.model.people, personBinder => html`
        <div>
          <vaadin-text-field
            label="Full name"
            ${field(personBinder.model.fullName)}
          ></vaadin-text-field>

          <strong>Full name:</strong>
          ${personBinder.value.fullName}
        </div>
      `)}
    `;
  }
}
```

## <a id="adding-removing-array-items"></a>Adding & Removing Array Items

To append or prepend a new item to an array, use the `appendItem()` method on the array binder node:

```typescript
this.binder.for(this.binder.model.people).appendItem();
this.binder.for(this.binder.model.people).prependItem();
```

By default, the new item values are empty. You can specify the new item value as an argument:

```typescript
this.binder.for(this.binder.model.people).appendItem({fullName: 'Jane Doe'});
```

To remove an item, use the `removeSelf()` method on the item binder node like this:

```typescript
personBinder.removeSelf();
```

The following example demonstrates adding and removing array items with the form view template:

```typescript
class GroupFormView extends LitElement {
  // ...

  render() {
    return html`
      ${repeat(this.binder.model.people, personBinder => html`
        <div>
          <vaadin-text-field
            label="Full name"
            ${field(personBinder.model.fullName)}
          ></vaadin-text-field>

          <vaadin-button @click=${() => personBinder.removeSelf()}>
            Delete
          </vaadin-button>
        </div>
      `)}

      <vaadin-button
        @click=${() => this.binder.for(this.binder.model.people).appendItem()}
      >
        Add
      </vaadin-button>
    `;
  }
}
```