Patternite Logo

React form component with Formik and Material UI


A general React form component based on Formik using Material UI and Formik Material UI libraries


This is a general text-field form component. This pattern follows the official Formik docs closely, with the addition of Material UI integration and API response error handling on form submit.

In the handleSubmit function, we assume the response from the API is an object of the form:

  success: Boolean  // determines whether the form submitted successfully
  code: Any  // a code from the server, such as "invalid-password", which indicates what the error is (if any)
  message: String  // an error message, which can be passed directly to the form through `setErrors`

Alternatively, the form error message can be determined client side based on code.

Profile picture for duncster

| edited

Patternite © 2022

Patternite Logo