fieldParts
Wires a widget's control to its field: id, name, blur and aria attributes.
Wires a widget's control to its field: its id and name, the blur report, and the aria attributes that tie it to its description and its errors.
An error is due once the field is invalid and was edited and left, or once the form was
submitted. While one is due, aria-invalid is true; while one with text is due, the control
points at the error element through aria-describedby and aria-errormessage. An id appears in
them only when its element is rendered.
Type parameters
| Name | Description |
|---|---|
TValue | The value type of the field. |
Parameters
| Name | Description |
|---|---|
field | The field the widget renders. |
options | What the widget renders besides the control. |
options.description | The description the widget renders below its label, if any. Only whether it is a non-empty string is read. |
Defaults
options.description:undefined, no description is rendered.
Returns
The props for the control, the ids for the description and error elements, whether an error is due, and the error texts.
Example
const TextField = ({ field, label, description }: FieldOf<string> & { label: string; description?: string }) => {
const { control, descriptionId, errorId, isErrorDue, errors } = fieldParts(field, { description })
return (
<div>
<label htmlFor={control.id}>{label}</label>
{description && <p id={descriptionId}>{description}</p>}
<input {...control} value={field.state.value} onChange={(event) => field.handleChange(event.target.value)} />
{isErrorDue && errors.length > 0 && <p id={errorId}>{errors.join(' ')}</p>}
</div>
)
}FieldParts
What fieldParts returns: the wiring of a widget's control and what it needs to render
its description and its errors.
Members
Prop
Type