Connect field metadata to a native textarea
Rendering a Conform field
Conform · Function
getTextareaProps
getTextareaProps generates props for an accessible native textarea from Conform field metadata. Options customize defaultValue and ARIA attributes.
How it works
Call getTextareaProps with field metadata and spread the returned object onto a native textarea. It supplies the field wiring and accessibility attributes; options can control defaultValue handling and ARIA behavior.
Syntax
getTextareaProps(meta, options)Parameters
| Name | Type | Description |
|---|---|---|
meta | FieldMetadata | Field metadata for the textarea, such as fields.content. |
options | GetTextareaPropsOptions | Optional settings controlling value and ARIA props, including value, ariaAttributes, ariaInvalid, and ariaDescribedBy. |
Returns
An object of props to spread onto a native textarea element.
Key points
- It packages the props needed to make a native textarea accessible.
- The value option controls whether defaultValue is included; set it to false for controlled inputs.
- ariaAttributes controls inclusion of aria-invalid and aria-describedby, and defaults to true.
- ariaInvalid selects whether ARIA state reflects errors or allErrors; it defaults to errors.
- ariaDescribedBy adds another ID to aria-describedby and can receive meta.descriptionId.
- Using the helper is not mandatory because the field metadata can be assigned directly.
Common mistakes
- For controlled textareas, pass the value option as false so the helper does not provide defaultValue.
- Use a custom helper for a non-native textarea component instead of assuming this helper matches its API.
Example: Accessible textarea
import { getTextareaProps, useForm } from '@conform-to/react';
export function Example() {
const [form, fields] = useForm();
return (
<form {...form}>
<textarea {...getTextareaProps(fields.content)} />
</form>
);
}Spreads the helper-generated accessibility and field props onto a native textarea.
When to use it
Suppress generated defaultValue
Controlled React state
Configure validation ARIA attributes
Accessible validation feedback
Append a description ID to aria-describedby
Descriptive help text
Interview questions
QWhat problem does getTextareaProps solve?
getTextareaProps(meta, options) returns props for an accessible native textarea. The result can be spread directly onto the element, as in <textarea {...getTextareaProps(fields.content)} />.
Follow-up: How would you avoid uncontrolled initialization for a controlled textarea? Pass the value option as false so defaultValue is omitted.
QHow does it configure ARIA behavior?
By default, the helper includes aria-invalid and aria-describedby. The ariaInvalid option chooses whether those attributes use meta.errors or meta.allErrors, and the default is errors.
Follow-up: How can a description ID be included in aria-describedby? Supply it through ariaDescribedBy, commonly using meta.descriptionId.
QIs using the helper required?
The helper is optional convenience API for reducing boilerplate. Field metadata can also be used directly to assign the textarea props.
Follow-up: What should you do for a custom textarea component? Build a component-specific helper because this helper targets native textarea elements.
Related
useFormgetFormPropsgetInputPropsgetSelectProps