Render nested object fields
A schema contains an object such as an address with street, city, and postal-code fields.
Conform · Pipe
form.getFieldset
getFieldset() returns the child-field metadata for a nested object. Call it on the parent field metadata to access nested fields with names inferred automatically.
- Since
- v1
How it works
Call getFieldset() on a field's metadata when that field represents a nested object. The returned fieldset exposes each child field as a property, and Conform infers the child names from the parent path, avoiding manually constructed names.
Syntax
field.getFieldset()Returns
A fieldset object containing the nested field metadata as properties.
Key points
- Invoke it on the metadata object for the nested parent field.
- The result exposes child fields and derives their input names from the nesting path.
- Nested structures can mix object fieldsets and array field lists.
- A nested object fieldset can be assigned to a local variable before rendering its children.
Common mistakes
- Call the method on the parent field metadata; it is not a standalone hook.
- Child field names are generated from the parent field path, so do not duplicate the nesting manually.
Example: Access nested fields
import { useForm } from '@conform-to/react';
export function AddressFields() {
const [form, fields] = useForm({
defaultValue: { address: { street: '', city: '' } },
});
const address = fields.address.getFieldset();
return (
<form {...form.props}>
<input {...address.street.props} />
<input {...address.city.props} />
</form>
);
}Gets the child field metadata for the nested address object, with names inferred from the parent field.
When to use it
Compose nested arrays and objects
A repeated item contains nested object properties.
Split nested fields into components
A form component receives field metadata for an object and needs its children.
Interview questions
QHow do you access fields inside a nested object?
Call getFieldset() on the metadata for a nested object, such as fields.address.getFieldset(). The result provides the nested fields as properties, with their names inferred automatically.
Follow-up: How would you handle a nested array? Use getFieldList() for the array, then call getFieldset() on each item field.
QWhat does getFieldset() return?
The returned object is a fieldset containing the child field metadata. You can access members such as address.street and use their metadata to render inputs.
Follow-up: How can the nested fieldset be used with a fieldset element? Pass the parent metadata to getFieldsetProps() when native fieldset accessibility props are needed.
QWhy use getFieldset() instead of useFieldset?
It replaces the older useFieldset approach for nested fields. The method is available directly on field metadata, so an additional nested-field hook or component is not required.
Follow-up: What is the analogous API for a list? Use getFieldList() on the parent list metadata, then obtain each item's fieldset.
Related
getFieldListgetFieldsetPropsuseFormuseFormMetadata