Accessible grouped fields
Applying Conform metadata to a native address or profile fieldset.
Conform · Function
getFieldsetProps
getFieldsetProps derives the properties needed to make a native fieldset accessible from Conform field metadata. Options customize generated ARIA behavior.
How it works
Call getFieldsetProps with field metadata and optional settings, then spread the returned properties onto a native HTML fieldset. The helper derives the related accessibility attributes; custom components require equivalent helpers or explicit metadata handling.
Syntax
getFieldsetProps(meta, options)Parameters
| Name | Type | Description |
|---|---|---|
meta | FieldMetadata | Field metadata used to derive the fieldset properties. |
options | GetFieldsetPropsOptions | Options controlling generated accessibility attributes, including ariaAttributes, ariaInvalid, and ariaDescribedBy. |
Returns
The properties required for an accessible native fieldset element.
Key points
- It derives the complete property set intended to make a fieldset accessible.
- The ariaAttributes option controls whether aria-describedby is included in the returned properties.
- ariaAttributes defaults to true.
- The ariaInvalid option chooses whether invalid-state attributes use errors or allErrors.
- ariaDescribedBy adds another identifier to aria-describedby.
- A field's descriptionId can be supplied as the additional aria-describedby identifier.
Common mistakes
- Use this helper for native fieldset elements; create a separate adapter for custom components.
- The helper is optional, so fieldset properties can instead be assigned directly from field metadata.
Example: Accessible native fieldset
import { useForm, getFieldsetProps } from "@conform-to/react";
export function AddressFieldset() {
const [, fields] = useForm();
return (
<fieldset {...getFieldsetProps(fields.address)}>
<legend>Address</legend>
</fieldset>
);
}This applies the accessibility-related properties derived from the address field metadata to a native fieldset.
When to use it
Described fieldsets
Adding a description identifier to generated aria-describedby.
Custom validation-state behavior
Choosing whether invalid-state attributes use immediate or aggregated errors.
Interview questions
QWhat problem does getFieldsetProps solve?
getFieldsetProps returns the properties needed to make a fieldset accessible. It is called with field metadata and can be spread onto a native fieldset element.
Follow-up: What should you do for a custom fieldset component? The documentation recommends making a custom helper rather than assuming the native-element helper fits it.
QHow is getFieldsetProps typically used with useForm?
The normal usage is getFieldsetProps(fields.address), followed by spreading the result onto fieldset. This derives related attributes from the field metadata and reduces repetitive wiring.
Follow-up: Can it be omitted? Yes; the metadata can be used directly when explicitly setting the fieldset properties.
QWhich accessibility options does the helper provide?
The helper supports options for accessibility behavior, including whether to include aria-describedby and whether invalid-state attributes use errors or allErrors. aria-describedby can also receive an additional identifier such as meta.descriptionId.
Follow-up: What is the default for ariaAttributes? It is true, so the accessibility attributes are included unless disabled.
Related
getFormPropsgetInputPropsuseFormFieldMetadata