Connect a field to its error message for screen readers.
Accessible validation
Conform · Pipe
field.errorId
field.errorId is a generated ID for a field's validation-error element. Use it with aria-describedby to associate the error text with the corresponding form control.
How it works
field.errorId is generated field metadata used as the ID of an error-message element. Reference it from the associated control with aria-describedby so assistive technologies can connect the field to its validation error.
Syntax
fields.fieldName.errorIdReturns
string
Key points
- Conform supplies errorId as a generated identifier that links a field to its validation-error text.
- Keep the input, label, and error associations separate: use the field id for the control and label, and reserve errorId for the error message.
- Assign errorId to the error container and reference it from the control's aria-describedby attribute.
- Generated IDs reduce the risk of duplicate identifiers when reusable field components render multiple fields.
Common mistakes
- Use errorId on the element that renders the field's validation errors; the input should reference that ID through aria-describedby.
Example: Associate a field with its error message
import { useForm } from '@conform-to/react';
export function MessageForm() {
const [form, fields] = useForm();
return (
<form {...form.props}>
<label htmlFor={fields.message.id}>Message</label>
<input
id={fields.message.id}
name={fields.message.name}
aria-describedby={fields.message.errorId}
/>
<div id={fields.message.errorId}>
{fields.message.errors}
</div>
</form>
);
}Render the field's error container with the generated ID, then reference that ID from the input's aria-describedby attribute.
When to use it
Render field controls and error containers without manually coordinating unique IDs.
Reusable field components
Apply the generated error ID directly when helper functions do not fit the component structure.
Custom input markup
Interview questions
QWhat is field.errorId used for?
errorId is an automatically generated string for associating a field's validation errors through aria-describedby. Put it on the error element and use the same value on the related input.
Follow-up: How would you also expose help text? Use descriptionId for the help element and include both descriptionId and errorId in aria-describedby when the field is invalid.
QHow do you wire errorId into accessible JSX?
The error message element should have id={fields.fieldName.errorId}. The corresponding control can set aria-describedby to that ID, allowing assistive technologies to identify the field's error text.
Follow-up: What should happen when the field has no error? Omit errorId from aria-describedby unless an error is present, while retaining any applicable description ID.
QWhy use Conform's generated error IDs instead of hard-coded IDs?
Conform generates the IDs, so application code does not need to invent a unique error identifier for each field. The metadata can be used directly, or helpers such as getInputProps can apply the relevant ARIA attributes.
Follow-up: When might a helper be preferable? Use getInputProps to reduce repeated attribute wiring, while direct field metadata remains available for custom markup.
Related
useFormuseFieldgetInputPropsdescriptionIdaria-describedby