Forms

reablocks recommended that you use a form library like react-hook-form (opens in a new tab) 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 (opens in a new tab).

Animations Table