RedwoodJS provides a set of helper components built on top of React Hook Form. These components simplify form creation, validation, and error handling. If the helpers are not flexible enough, @redwoodjs/forms re-exports everything from React Hook Form, allowing you to use it directly.
Core Components
| Component | Description |
|---|
<Form> | Surrounds all components, providing form and error contexts |
<FormError> | Displays error messages from the server (typically at the top of the form) |
<Label> | Replaces the HTML <label> tag; supports error-styling props |
<InputField> | Replaces the HTML <input> tag; supports validation and error-styling props |
<SelectField> | Replaces the HTML <select> tag; supports validation and error-styling props |
<TextAreaField> | Replaces the HTML <textarea> tag; supports validation and error-styling props |
<FieldError> | Displays error messages for a specific field if it has validation errors |
<Submit> | Replaces <button type="submit">; triggers validation and the onSubmit function |
Input Field Components
Redwood provides specialized components for all HTML input types using the <TypeField> naming convention:
<ButtonField>, <CheckboxField>, <ColorField>, <DateField>, <DatetimeLocalField>, <EmailField>, <FileField>, <HiddenField>, <ImageField>, <MonthField>, <NumberField>, <PasswordField>, <RadioField>, <RangeField>, <ResetField>, <SearchField>, <SubmitField>, <TelField>, <TextField>, <TimeField>, <UrlField>, <WeekField>
import {
useForm,
useFormContext,
// Or anything else React Hook Form exports!
} from '@redwoodjs/forms'
