Model nested form objects
A form collects grouped values such as an address, profile, or billing details.
Conform · Const
nested objects
Conform supports nested objects and arrays through structured field names: dot notation for object properties and bracket notation for array indices. Use getFieldset() for nested object fields and combine it with getFieldList() for nested arrays.
How it works
Conform represents nested objects through dot-separated field names and lets a parent field metadata object expose child metadata with getFieldset(). The generated child metadata supplies the correctly typed name and input props, so fields do not need manually assigned names.
Syntax
fields.parent.getFieldset()Key points
- Nested objects use dot notation, while indexed arrays use bracket notation.
- The two naming conventions can be combined to describe properties inside array elements.
- A submitted indexed property is rebuilt into an object containing an array with the corresponding nested value.
- Use the parent metadata’s getFieldset() method to access nested child fields with inferred names.
- Nested array structures are created by combining fieldsets and field lists.
Common mistakes
- Do not manually assign nested input names when generated field metadata is available; use the inferred names for better type safety.
Example: Nested address field
import { useForm } from '@conform-to/react';
import { parseWithZod } from '@conform-to/zod';
import { z } from 'zod';
const schema = z.object({
address: z.object({ city: z.string() }),
});
export function AddressForm() {
const [form, fields] = useForm({
onValidate({ formData }) {
return parseWithZod(formData, { schema });
},
});
const address = fields.address.getFieldset();
return (
<form {...form.props}>
<input {...address.city.props} />
</form>
);
}The parent fieldset exposes the nested city field and supplies its generated name and props.
When to use it
Render arrays of objects
A form contains repeatable records whose properties must remain grouped by item.
Preserve inferred field names
A component renders a child field without manually constructing its name.
Interview questions
QHow does Conform encode nested object properties in field names?
Conform denotes an object property with dot notation, such as address.city. When submitted, that naming convention reconstructs the nested object shape.
Follow-up: How would you represent an array item’s nested property? Use bracket notation for the index, such as tasks[0].content.
QHow do you render a field inside a nested object?
Call getFieldset() on the parent field metadata. It returns metadata for each child field, including an inferred name, so the child can be rendered without manually composing the name.
Follow-up: Why prefer the generated child name? It preserves stronger type safety than an untyped handwritten string.
QHow are nested arrays supported?
Nested arrays combine getFieldset() with getFieldList(). The field list handles indexed entries, while each entry’s fieldset exposes its nested properties.
Follow-up: What naming form does the resulting nested array use? A property inside the first item can be represented as tasks[0].content.
Related
getFieldset()getFieldList()object.propertyarray[index]