Source: https://tanstack.com/form/latest/docs/framework/svelte/guides/arrays

TanStack

Form v1v1

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

Svelte

Version

Latest

Search...

+ K

Menu

• Home

• Frameworks

• Contributors

• Community Resources

• GitHub

• Discord

Getting Started

• Overview
  
  core

• Installation
  
  core

• Philosophy
  
  core

• Comparison
  
  core

• TypeScript
  
  core

• Quick Start
  
  svelte

Guides

• Basic Concepts
  
  svelte

• Form Validation
  
  svelte

• Dynamic Validation
  
  svelte

• Async Initial Values
  
  svelte

• Arrays
  
  svelte

• Linked Fields
  
  svelte

API Reference

• JavaScript Reference
  
  core

• Classes / FieldApi
  
  core

• Classes / FormApi
  
  core

• Functions / formOptions
  
  core

• Functions / mergeForm
  
  core

• Interfaces / FieldApiOptions
  
  core

• Interfaces / FieldOptions
  
  core

• Interfaces / FieldValidators
  
  core

• Interfaces / FormOptions
  
  core

• Interfaces / FormValidators
  
  core

• Types / DeepKeys
  
  core

• Types / DeepValue
  
  core

• Types / FieldInfo
  
  core

• Types / FieldMeta
  
  core

• Types / FieldState
  
  core

• Types / BaseFormState
  
  core

• Types / DerivedFormState
  
  core

• Types / Updater
  
  core

• Types / UpdaterFn
  
  core

• Types / ValidationError
  
  core

• Types / ValidationMeta
  
  core

Examples

• Simple
  
  svelte

• Arrays
  
  svelte

• Standard Schema
  
  svelte

Framework

Svelte

Version

Latest

Menu

• Home

• Frameworks

• Contributors

• Community Resources

• GitHub

• Discord

Getting Started

• Overview
  
  core

• Installation
  
  core

• Philosophy
  
  core

• Comparison
  
  core

• TypeScript
  
  core

• Quick Start
  
  svelte

Guides

• Basic Concepts
  
  svelte

• Form Validation
  
  svelte

• Dynamic Validation
  
  svelte

• Async Initial Values
  
  svelte

• Arrays
  
  svelte

• Linked Fields
  
  svelte

API Reference

• JavaScript Reference
  
  core

• Classes / FieldApi
  
  core

• Classes / FormApi
  
  core

• Functions / formOptions
  
  core

• Functions / mergeForm
  
  core

• Interfaces / FieldApiOptions
  
  core

• Interfaces / FieldOptions
  
  core

• Interfaces / FieldValidators
  
  core

• Interfaces / FormOptions
  
  core

• Interfaces / FormValidators
  
  core

• Types / DeepKeys
  
  core

• Types / DeepValue
  
  core

• Types / FieldInfo
  
  core

• Types / FieldMeta
  
  core

• Types / FieldState
  
  core

• Types / BaseFormState
  
  core

• Types / DerivedFormState
  
  core

• Types / Updater
  
  core

• Types / UpdaterFn
  
  core

• Types / ValidationError
  
  core

• Types / ValidationMeta
  
  core

Examples

• Simple
  
  svelte

• Arrays
  
  svelte

• Standard Schema
  
  svelte

On this page

• Basic Usage

• Full Example

Arrays

Copy Markdown

TanStack Form supports arrays as values in a form, including sub-object values inside of an array.

Basic Usage
-----------

To use an array, you can use field.state.value on an array value in conjunction with each blocks :

svelte

<script>
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      people: [],
    },
  }))
</script>

<form.Field name="people" mode="array">
  {#snippet children(field)}
    {#each field.state.value as person, i}
      <!-- ... -->
    {/each}
  {/snippet}
</form.Field>


<script>
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      people: [],
    },
  }))
</script>

<form.Field name="people" mode="array">
  {#snippet children(field)}
    {#each field.state.value as person, i}
      <!-- ... -->
    {/each}
  {/snippet}
</form.Field>

This will regenerate the list every time you run pushValue on field:

svelte

<button onclick={() => field.pushValue({ name: '', age: 0 })} type="button">
  Add person
</button>


<button onclick={() => field.pushValue({ name: '', age: 0 })} type="button">
  Add person
</button>

Finally, you can use a subfield like so:

svelte

<form.Field name={`people[${i}].name`}>
  {#snippet children(subField)}
    <input
      value={subField.state.value}
      oninput={(e) => {
        subField.handleChange(e.currentTarget.value)
      }}
    />
  {/snippet}
</form.Field>


<form.Field name={`people[${i}].name`}>
  {#snippet children(subField)}
    <input
      value={subField.state.value}
      oninput={(e) => {
        subField.handleChange(e.currentTarget.value)
      }}
    />
  {/snippet}
</form.Field>

Full Example
------------

svelte

<script lang="ts">
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      people: [] as Array<{ age: number; name: string }>,
    },
    onSubmit: ({ value }) => alert(JSON.stringify(value)),
  }))
</script>

<form
  id="form"
  onsubmit={(e) => {
    e.preventDefault()
    e.stopPropagation()
    form.handleSubmit()
  }}
>
  <form.Field name="people">
    {#snippet children(field)}
      <div>
        {#each field.state.value as person, i}
          <form.Field name={`people[${i}].name`}>
            {#snippet children(subField)}
              <div>
                <label>
                  <div>Name for person {i}</div>
                  <input
                    value={person.name}
                    oninput={(e: Event) => {
                      const target = e.target as HTMLInputElement
                      subField.handleChange(target.value)
                    }}
                  />
                </label>
              </div>
            {/snippet}
          </form.Field>
        {/each}

        <button
          onclick={() => field.pushValue({ name: '', age: 0 })}
          type="button"
        >
          Add person
        </button>
      </div>
    {/snippet}
  </form.Field>

  <button type="submit"> Submit </button>
</form>


<script lang="ts">
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      people: [] as Array<{ age: number; name: string }>,
    },
    onSubmit: ({ value }) => alert(JSON.stringify(value)),
  }))
</script>

<form
  id="form"
  onsubmit={(e) => {
    e.preventDefault()
    e.stopPropagation()
    form.handleSubmit()
  }}
>
  <form.Field name="people">
    {#snippet children(field)}
      <div>
        {#each field.state.value as person, i}
          <form.Field name={`people[${i}].name`}>
            {#snippet children(subField)}
              <div>
                <label>
                  <div>Name for person {i}</div>
                  <input
                    value={person.name}
                    oninput={(e: Event) => {
                      const target = e.target as HTMLInputElement
                      subField.handleChange(target.value)
                    }}
                  />
                </label>
              </div>
            {/snippet}
          </form.Field>
        {/each}

        <button
          onclick={() => field.pushValue({ name: '', age: 0 })}
          type="button"
        >
          Add person
        </button>
      </div>
    {/snippet}
  </form.Field>

  <button type="submit"> Submit </button>
</form>

Edit on GitHub

Async Initial Values

Linked Fields

Partners Become a Partner