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.