This mantine-next-template integrates React Hook Form as a means of form contol and Zod as form validation. Input components developed by Mantine can be easily controlled through <FormController />
as in here.
A custom hook useForm
is implemented as a wrapper of RHF to solve the problem of boilerplate codes as shown in src/containers/Form.tsx
when developers are constructing forms. The sample form is adapted from Mantine UI, and can be found in src/pages/simple-form.tsx
.
Please refer directly to the codes here.
The props are almost the same as useForm
in React Hook Form
. However, there are three fields required:
- defaultvalues: Same as RHF but required
- onSubmit: Similar to RHF
SubmitHandler
inhandleSubmit
, but comes with an additionalcontext
parameter, which is of typeUseFormReturn
. - controllers: Objects of field props. Required props: control (controlled components), label (Field label), name (HTML input name)
And two optional fields:
- schema: Zod schema.
- onSubmitError: Similar to RHF
SubmitErrorHandler
inhandleSubmit
, but comes with an additionalcontext
parameter, which is of typeUseFormReturn
.
In addition, there are two ways to access RHF useForm returned methods
:
Moreover, submit button for the form can be accessed using dot notation [example]. The only difference between this one and that of mantine is that id
and loaderProps
are already passed to the button props, as shown in here, so that the button does not have to live inside html form tag, such as this one.
- Checkbox Group
- File Input
- Multi-Select
- Number Input
- Password Input
- Radio Group
- Select
- Text Area
- Text Input
- Date Input
- Switch Group
- Pin Input
First, run the development server:
pnpm dev
# or
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
If you have any questions, please feel free to file issues or contact me at rayologist1002@gmail.com