Associate field help text
A text input or textarea has explanatory help text that should be announced by assistive technology.
Conform · Pipe
field.descriptionId
field.descriptionId is Conform's generated ID for associating a field with its descriptive help text through aria-describedby. Put it on the description element and pass it to the field's ARIA description attribute.
How it works
field.descriptionId is an auto-generated identifier for the field's descriptive help text. Put it on the description element and use it as the field's aria-describedby value; when errors also need to be announced, combine this ID with ariaDescribedBy or the error ID.
Syntax
field.descriptionIdReturns
string
Key points
- Conform supplies descriptionId as the generated identifier that connects a field to its help text through aria-describedby.
- Place descriptionId on the element containing explanatory help text and reference that element from the field.
- Error messages have a separate errorId, so validation feedback can be associated independently from the normal field description.
Common mistakes
- When both help text and validation errors should be announced, merge descriptionId with the error-related aria-describedby value instead of replacing one with the other.
Example: Associate help text with a field
import { useField } from '@conform-to/react';
export function MessageField() {
const [field] = useField('message');
return (
<>
<textarea {...field.getInputProps()} />
<div id={field.descriptionId}>The message you want to send</div>
</>
);
}Render the generated descriptionId on the help-text element and associate it with the field through the generated input props.
When to use it
Combine help text with errors
A field displays both guidance and a validation message.
Avoid manual ID coordination
A form uses generated metadata instead of hand-maintained accessibility IDs.
Interview questions
QWhat is field.descriptionId used for?
It is an automatically generated string ID used to connect a field with its descriptive help text through aria-describedby. Assign it to the help-text element and reference it from the field.
Follow-up: How should help text and errors be associated at the same time? Combine descriptionId with the error ID in the field's aria-describedby value.
QHow do you wire descriptionId into accessible markup?
Use descriptionId as the id of the help-text element, then pass that same value as the field's aria-describedby value. This lets assistive technologies discover the field description.
Follow-up: What should happen when the field is invalid? Include the error ID as well, while retaining descriptionId for the help text.
QWhy use the generated identifier instead of a hand-written ID?
The field metadata exposes descriptionId as a string, and the ID is generated by Conform rather than manually chosen. The input can receive it through the ariaDescribedBy option or equivalent metadata-driven props.
Follow-up: Why use the metadata instead of inventing an ID? It keeps the field and its descriptive element consistently associated with Conform's generated accessibility IDs.
Related
useFieldariaDescribedByerrorIdgetInputPropsgetTextareaPropsgetFieldsetPropsuseForm