📄 tanstack/form/v1/docs/framework/solid/guides/arrays
File: arrays.md | Updated: 11/15/2025
Source: https://tanstack.com/form/v1/docs/framework/solid/guides/arrays
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
Solid
Version
v1
Search...
+ K
Menu
Getting Started
Guides
API Reference
Examples
Framework
Solid
Version
v1
Menu
Getting Started
Guides
API Reference
Examples
On this page
Arrays
Copy Markdown
TanStack Form supports arrays as values in a form, including sub-object values inside of an array.
To use an array, you can use field.state.value on an array value in conjunction with Index from solid-js :
jsx
function App() {
const form = createForm(() => ({
defaultValues: {
people: [],
},
}))
return (
<form.Field name="people" mode="array">
{(field) => (
<Show when={field().state.value.length > 0}>
{/* Do not change this to `For` or things will not work as-expected */}
<Index each={field().state.value}>
{
(_, i) => null // ...
}
</Index>
</Show>
)}
</form.Field>
)
}
function App() {
const form = createForm(() => ({
defaultValues: {
people: [],
},
}))
return (
<form.Field name="people" mode="array">
{(field) => (
<Show when={field().state.value.length > 0}>
{/* Do not change this to `For` or things will not work as-expected */}
<Index each={field().state.value}>
{
(_, i) => null // ...
}
</Index>
</Show>
)}
</form.Field>
)
}
You must use Index from solid-js and not For because For will cause the inner components to be re-rendered every time the array changes.
This causes the field to lose its value and therefore delete the subfield's value.
This will generate the mapped JSX every time you run pushValue on field:
jsx
<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:
jsx
<form.Field name={`people[${i}].name`}>
{(subField) => (
<input
value={subField().state.value}
onInput={(e) => {
subField().handleChange(e.currentTarget.value)
}}
/>
)}
</form.Field>
<form.Field name={`people[${i}].name`}>
{(subField) => (
<input
value={subField().state.value}
onInput={(e) => {
subField().handleChange(e.currentTarget.value)
}}
/>
)}
</form.Field>
jsx
function App() {
const form = createForm(() => ({
defaultValues: {
people: [],
},
onSubmit: ({ value }) => alert(JSON.stringify(value)),
}))
return (
<div>
<form
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
}}
>
<form.Field name="people">
{(field) => (
<div>
<Show when={field().state.value.length > 0}>
{/* Do not change this to For or the test will fail */}
<Index each={field().state.value}>
{(_, i) => (
<form.Field name={`people[${i}].name`}>
{(subField) => (
<div>
<label>
<div>Name for person {i}</div>
<input
value={subField().state.value}
onInput={(e) => {
subField().handleChange(e.currentTarget.value)
}}
/>
</label>
</div>
)}
</form.Field>
)}
</Index>
</Show>
<button
onClick={() => field().pushValue({ name: '', age: 0 })}
type="button"
>
Add person
</button>
</div>
)}
</form.Field>
<button type="submit">Submit</button>
</form>
</div>
)
}
function App() {
const form = createForm(() => ({
defaultValues: {
people: [],
},
onSubmit: ({ value }) => alert(JSON.stringify(value)),
}))
return (
<div>
<form
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
}}
>
<form.Field name="people">
{(field) => (
<div>
<Show when={field().state.value.length > 0}>
{/* Do not change this to For or the test will fail */}
<Index each={field().state.value}>
{(_, i) => (
<form.Field name={`people[${i}].name`}>
{(subField) => (
<div>
<label>
<div>Name for person {i}</div>
<input
value={subField().state.value}
onInput={(e) => {
subField().handleChange(e.currentTarget.value)
}}
/>
</label>
</div>
)}
</form.Field>
)}
</Index>
</Show>
<button
onClick={() => field().pushValue({ name: '', age: 0 })}
type="button"
>
Add person
</button>
</div>
)}
</form.Field>
<button type="submit">Submit</button>
</form>
</div>
)
}
