getFieldsetProps
A helper that returns all the props required to make a fieldset element accessible.
1const props = getFieldsetProps(meta, options);
#Example
1import { useForm, getFieldsetProps } from '@conform-to/react';
2
3function Example() {
4 const [form, fields] = useForm();
5
6 return <fieldset {...getFieldsetProps(fields.address)} />;
7}
#Options
ariaAttributes
Decide whether to include aria-invalid
and aria-describedby
in the result props. Default to true.
ariaInvalid
Decide whether the aria attributes should be based on meta.errors
or meta.allErrors
. Default to errors.
ariaDescribedBy
Append additional id to the aria-describedby
attribute. You can pass meta.descriptionId
from the field metadata.
#Tips
The helper is optional
The helper is just a convenience function to help reducing boilerplate and make it more readable. You can always use the field metadata directly to set the props of your fieldset element.
1// Before
2function Example() {
3 return (
4 <fieldset
5 id={fields.address.id}
6 name={fields.address.name}
7 form={fields.address.formId}
8 aria-invalid={!form.valid || undefined}
9 aria-describedby={!form.valid ? form.errorId : undefined}
10 />
11 );
12}
13
14// After
15function Example() {
16 return <fieldset {...getFieldsetProps(fields.address)} />;
17}
Make your own helper
The helper is designed for the native fieldset elements. If you need to use a custom component, you can always make your own helpers.