getTextareaProps

A helper that returns all the props required to make an textarea element accessible.

1const props = getTextareaProps(meta, options);

#Example

1import { useForm, getTextareaProps } from '@conform-to/react';
2
3function Example() {
4  const [form, fields] = useForm();
5
6  return <textarea {...getTextareaProps(fields.content)} />;
7}

#Options

`value`

The helper will return a defaultValue unless this is set to false, e.g. a controlled input.

`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 textarea element.

1// Before
2function Example() {
3  return (
4    <form>
5      <textarea
6        key={fields.content.key}
7        id={fields.content.id}
8        name={fields.content.name}
9        form={fields.content.formId}
10        defaultValue={fields.content.initialValue}
11        aria-invalid={!fields.content.valid || undefined}
12        aria-describedby={
13          !fields.content.valid ? fields.content.errorId : undefined
14        }
15        required={fields.content.required}
16        minLength={fields.content.minLength}
17        maxLength={fields.content.maxLength}
18      />
19    </form>
20  );
21}
22
23// After
24function Example() {
25  return (
26    <form>
27      <textarea {...getTextareaProps(fields.content)} />
28    </form>
29  );
30}

Make your own helper

The helper is designed for the native textarea elements. If you need to use a custom component, you can always make your own helpers.