Skip to Content

Forms

reablocks recommended that you use a form library like react-hook-form to handle form state. This will allow you to easily validate and submit your form. Below is an example of how to use react-hook-form with the Input component.

Here is a basic login form example:



In order to use the react-hook-form library, you need to wrap the Input in a Controller component. Here is an example of how we wrapped the Input component in the BasicForm example above:

import { Input } from 'reablocks'; import { useForm, Controller } from 'react-hook-form'; export const BasicForm = () => { const { control, handleSubmit } = useForm(); return ( <form onSubmit={handleSubmit(values => console.log('values', values))}> <Controller name="email" control={control} render={({ field: { value, onBlur, onChange } }) => ( <Input name="email" disabled={isSubmitting} placeholder="Enter your email address..." value={value} type="email" onChange={onChange} onBlur={onBlur} /> )} /> </Form> ); };

More examples of how to use the react-hook-form library can be found in the official documentation.

Last updated on