Form
Labels, hints and errors, tied to their fields.
Default
Submit it empty: two errors appear, and correcting a field clears its own.
This is the only component that leans on an outside package: react-hook-form holds the values, the touched fields and the validation. What these components do is the wiring nobody enjoys — giving the field an id, pointing the label at it, tying the hint and the error to it, and marking it invalid when it is.
Installation
npx philcn@latest add formThe file is written into your project. It is yours from then on — change it as you like.
Props
| Prop | Type | What it does |
|---|---|---|
| FormField.name * | TName | The field's name in the form. Required. |
| FormField.control | Control<TFieldValues, any, TFieldValues> | The control object from useForm. |
| FormField.rules | Omit<RegisterOptions<TFieldValues, TName>, "disabled" | "setValueAs" | "valueAsDate" | "valueAsNumber"> | The validation rules for this field. |
| FormField.render * | ({ field, fieldState, formState, }: { field: ControllerRenderProps<TFieldValues, TName>; fieldState: ControllerFieldState; formState: UseFormStateReturn<TFieldValues>; }) => ReactElement<...> | Draws the field. It is handed the field's props to spread onto your input. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.
Worth knowing
- Install react-hook-form yourself: philcn lists it as optional, so a project with no form never installs it.
- FormMessage shows the error for its own field and disappears when there is none — you do not pass it anything.