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.