Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProReact Hook Form adapter: a Controller wrapped in a Field with label, description, error and ids wired, plus a submit button, a form-level error and a helper that maps server errors onto fields.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Export | Description |
|---|---|
RhfField | Controller + Field + label, description and error with ids wired. |
RhfSubmitButton | A submit button that disables itself and shows a spinner while isSubmitting. |
RhfFormError | Shows the form-level server message (root.server) as an alert. |
applyServerErrors(setError, errors, fields?) | Puts a { field: message } object from your API onto the fields; _form or unknown keys become the form message. |
Prop (RhfField) | Type | Description |
|---|---|---|
control | Control<TValues> | From useForm. |
name | FieldPath<TValues> | The field. |
label, description | ReactNode | Optional label and hint. |
required | boolean | Adds an aria-hidden asterisk to the label. |
render | ({ field, fieldState, controlProps }) => ReactElement | Build the control. controlProps holds id, aria-invalid and aria-describedby. |
htmlFor; the description and the error are joined into aria-describedby.aria-invalid="true" when React Hook Form reports an error, and the error renders in a role="alert" region so it is announced.RhfSubmitButton sets aria-busy while submitting and is disabled to stop double submits; the form-level message is an alert too.The component ships with a Testing Library test (rhf-field.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.