React Hook Form integration 🧩

React Suite's form components can be used with React Hook Form. React Hook Form is a simple, flexible and powerful form validation library that helps you easily manage form state and validation.

Usage 

import { useForm, Controller } from 'react-hook-form';
import { Input, Button, Form } from 'rsuite';

const App = () => {
  const defaultValues = { name: '' };
  const { control, handleSubmit } = useForm({ defaultValues });
  const onSubmit = data => alert(JSON.stringify(data, null, 2));

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="name"
        control={control}
        render={({ field }) => (
          <Input
            id={field.name}
            value={field.value}
            onChange={value => field.onChange(value)}
            placeholder="Name"
          />
        )}
      />

      <Button appearance="primary" type="submit">
        Submit
      </Button>
    </Form>
  );
};

Examples

Basic

Validation

Validation with Yup

react-hook-form provides a validation resolver that can be integrated with popular validation libraries, including: Yup, Zod, AJV, Joi, Superstruct, Vest, class-validator, io-ts, typanion, Ajv, TypeBox, Valibot and nope.

The following is an example using Yup validation:

Other data entry components

All data entry components in React Suite can be used with React Hook Form. The following example demonstrates how to use React Hook Form with the DatePicker and Rate components.

Vercel banner