Utilities / getTextareaProps

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.