Formik integration 🧩 #

React Suite can be coupled smoothly with Formik. This guide will show you how to use Formik with React Suite.

Usage #

The following will use the useFormik hook to create a simple form with the Input component.

import { useFormik } from 'formik';
import { Input, Button } from 'rsuite';

const App = () => {
  const formik = useFormik({
    initialValues: {
      name: ''
    },
    onSubmit: values => {
      console.log(values);
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <Input
        name="name"
        value={formik.values.name}
        onChange={value => {
          formik.setFieldValue('name', value);
        }}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
};

Examples #

Basic #

Validation #

Validation with Yup #

Yup is a schema builder for runtime value parsing and validation. Formik integrates well with Yup, making it easy to use Yup schemas with Formik forms.

If you prefer to use Zod, consider using the community-provided adapter zod-formik-adapter.

Other data entry components #

All data entry components in React Suite can be used with Formik. The following will demonstrate how to use Formik with the DatePicker and Rate components.