Formik adoption guide: Overview, examples, and alternatives – LogRocket Blog

React forms can be lengthy and complicated. Likewise, most tools that assist with building forms in React often perform an excessive amount of “magic” underneath the hood, which tends to hinder performance to some extent. Formik is a small JavaScript library built in response to the hardships experienced when creating large forms in React.

In this adoption guide, we’ll discuss Formik’s features and use cases that make it a great choice for React projects with forms. We’ll also take a look at how to get started with Formik, including styling and animating it, and when an alternate form library might be better suited to your needs.

By the end of this guide, you should have a strong sense of when and how to adopt Formik effectively. Let’s get right into it.

What is Formik?

Jared Palmer created Formik out of his frustration from building React forms while building an extensive internal administrative dashboard alongside Eon White. Faced with about 30 distinct forms, he quickly realized there was a significant advantage in standardizing input components and streamlining the data flow through the forms.

When creating Formik, Palmer’s goal was to develop a scalable, performant, form helper with a minimal API that does the “annoying stuff” and leaves the rest up to the developer.

Formik helps developers with:

• Getting values in and out of form state
• Validation and error messages
• Handling form submission

Formik tracks the state of your form and then uses props to expose it to your form along with a few reusable methods and event handlers, including handleChange, handleBlur, and handleSubmit. As expected, handleChange and handleBlur determine which field has to be updated based on an id or name attribute.

Quoting directly from the author, “Formik initially started by expanding on this little higher-order component by Brent Jackson, some naming conventions from Redux-Form, and (most recently) the render props approach popularized by React-Motion and React-Router 4.”

Further reading:

Why choose Formik?

Formik has become widely accepted in the industry as one of the best form-building tools. In this section we’ll see why that’s the case and hopefully make a strong argument for why you should try out Formik in your next project.

Within the React ecosystem, Formik is a well-liked module that makes form development and maintenance easier. It simplifies creating and managing complicated forms in React apps by offering a set of tools and patterns to assist with form state, validation, and submission.

Some of Formik’s advantages include:

• Ease of use — Getting started with Formik is easy, requiring only a few lines of code. It’s incrementally adoptable and makes form development in React much easier, handling form values, validation, and form submission seamlessly. We’ll see in the next section how Formik provides an object that holds errors, the form state, and much more
• Bundle size — Formik is only about 12.7 kB minified and gzipped. With such a small bundle size, you should have no problem introducing Formik to your application without leading to any noticeable bloat
• Community and ecosystem — There’s a very active community in the Formik ecosystem, since it’s currently widely accepted as one of the best form-building tools for React. The thriving community has conveniently provided some open source integrations that would have otherwise been a pain to build on your own
• Learning curve — Learning Formik shouldn’t be hard if you have some prior experience with building React forms. At its most basic, Formik augments your form and provides additional data for tracking state, errors, and touched values
• Documentation — Formik’s documentation is well-written and provides a variety of resources such as tutorials, guides, API references, and examples
• Integrations — There is currently a set of open source UI framework wrappers that are readily available for use with Formik. Formik also supports validation libraries like Yup

Despite all this, it would be naive to think these advantages automatically make Formik the best choice in any situation. You should also consider when not to use Formik for reasons like the following:

• Other frameworks — Formik is designed specifically for React. If you’re working in a non-React environment, such as Angular, Vue, or a plain JavaScript project, Formik is not applicable
• Performance concerns — Formik can cause performance overhead, particularly when creating large forms with lots of fields and intricate validations. You may need a more straightforward solution or specialized form management suited to your requirements if you observe performance problems, such as sluggish input fields or form submissions
• Simple forms — If you have a very basic form with few fields and little validation, it might be unnecessary to use Formik. Under such circumstances, using React’s useState and useEffect Hooks to manage form state and validation manually may be simpler and require less code
• Learning curve — As stated previously, Formik is easy to pick up if you have prior experience with React. However, for teams who are new to React or would rather not add other libraries with their learning curves, using basic React form handling can be a better option. The addition of Formik introduces an additional layer of abstraction, requiring knowledge of its patterns and API

Let’s take a quick look at how to get started with Formik next.

Further reading:

Getting started with Formik

We’ll use create-react-app for this simple example:

npx create-react-app my-app

To start using Formik, run this command:

npm i formik
//or
yarn add formik

We’ll build a simple form with two fields — username and password — and a Submit button that alerts the content of our form.

Delete the initial files in the my-app folder created by create-react-app and then replace it with the following files. First, this index.js file:

##index.js

import React from "react"
import ReactDOM from "react-dom/client"
import "./index.css"

const SimpleForm = () => {
  return (
    
  )
}
function App() {
  return 
}
const rootElement = ReactDOM.createRoot(document.getElementById("root"))
rootElement.render()

export default SimpleForm

Second, this index.css file:

/* index.css */

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
/* SimpleForm.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
form {
  display: flex;
  flex-direction: column;
}
.form-group {
  margin-bottom: 1rem;
}
label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
input[type="text"],
input[type="password"] {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #0056b3;
}

The boilerplate code above is for a basic React form. We’ll apply gradual changes to the form using Formik to clearly understand how Formik works.

Import the useFormik Hook from the formik package and use it to set the initial values of the fields in our form:

 class="language-javascript hljs"import { useFormik } from "formik"

//at the beginning of the simpleForm function
const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2))
    },
  })

Now we can use the object returned from the useFormik Hook in our form as follows:

Formik provides us with the formik.handleChange and formik.handleSubmit helper methods, which function as you’d expect. The formik.values field contains all the values in our form as set in the useFormik Hook.

With the above code, we created a simple form that has two fields and a Submit button.

Formik features

In this section, we’ll continue building on our form while exploring more Formik features.

Values

The first Formik feature we’ll look at is the formik.values field we saw briefly in the previous section.

The formik.values field helps track the state of our application. We can set the initial values of the fields in our application by using the useFormik Hook and passing an initialValues object.

Validation

The form we built above lacks any means for validating user input. Let’s see how we can add validation to our form.

Formik provides a concise method to handle user input validation by using the validate function of the useFormik Hook. The values of each of our fields are passed to the validate function, with which we can validate inputs.

Add the following code to the top of the simpleForm function:

 const validate = (values) => {
    const errors = {}
    if (!values.email) {
      errors.email = "Email is Required"
    } else if (
      !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
    ) {
      errors.email = "Invalid email address"
    }
    if (!values.password) {
      errors.password = "Password is Required"
    } else if (values.password.length < 6)
      errors.password = "Password must contain 6 or more characters"
    return errors
 }

Then add the validate function to the useFormik Hook:

const formik = useFormik({
    //...
    validate,
    //..
})

Great! With that, we’ve added validation for user inputs in the username and password fields. If the username field is blank or contains an invalid email address, Formik will return an errors object. This will also happen if the password field is blank or the password isn’t long enough.

Further reading:

Errors

The validate function we wrote above returns an errors object. The errors object, which is available to us via formik.errors, contains the error messages we set for each field in the validate function.

We can now update our form fields to display the errors as follows:

Touched

Formik provides a way to track fields that the user has visited previously. formik.touched contains all the fields in our form with a boolean value set to true if the user has visited the field. We use formik.handleBlur handler to update the touched fields.

We can update our form to track the visited fields and display errors only if the user has visited a field:

Use cases for Formik

Now that we understand how Formik works, we can take a look at some use cases:

• Basic form handling — Formik is generally used to manage form states (values, touched, errors) with ease. It typically handles form submissions and resetting form states, providing a clean and intuitive API for form creation. However, keep in mind that Formik may be unnecessary for very simple forms, as mentioned above
• Form validation — Formik provides integration with libraries like Yup to handle form validation. As seen in previous sections, it provides built-in validation methods and can handle both synchronous and asynchronous validations
• Dynamic forms — Formik is great for managing forms with dynamic fields that change based on user input or other conditions. It offers supporting arrays of fields (e.g., lists of items with repeatable fields)
• Complex form workflows — Formik can be used for building and handling multi-step forms with ease. You can use it to manage complex form logic, such as conditional fields and nested fields

Further reading:

Styling and animating Formik forms

In this section, we’ll focus on different ways we can style our Formik forms, including traditional CSS, CSS-in-JS libraries, and CSS frameworks. Here’s an example using CSS modules:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import styles from './LoginForm.module.css';

const LoginForm = () => {
  return (
     {
        setTimeout(() => {
          console.log(values);
          setSubmitting(false);
        }, 400);
      }}
    >
      
    
  );
};

export default LoginForm;

Meanwhile, here’s an example using the styled-components library:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import styled from 'styled-components';

const StyledForm = styled(Form)`
  display: flex;
  flex-direction: column;
`;

const StyledField = styled(Field)`
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
`;

const StyledErrorMessage = styled.div`
  color: red;
  font-size: 0.8rem;
`;

const SubmitButton = styled.button`
  padding: 0.5rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    background-color: #0056b3;
  }
`;

const LoginForm = () => {
  return (
     {
        setTimeout(() => {
          console.log(values);
          setSubmitting(false);
        }, 400);
      }}
    >
      
        Email
        
        

        Password
        
        

        Submit
      
    
  );
};

export default LoginForm;

You can also style Formik forms using Tailwind CSS. The code below shows how to do so:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const LoginForm = () => {
  return (
     {
        setTimeout(() => {
          console.log(values);
          setSubmitting(false);
        }, 400);
      }}
    >
      
    
  );
};

export default LoginForm;

You can also style Formik forms with a couple of third-party libraries. We’ll see some of them below. In this example, we use Formik with Material UI’s TextField and Button components:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  useFormik
} from 'formik';
import * as yup from 'yup';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

const validationSchema = yup.object({
  email: yup
    .string('Enter your email')
    .email('Enter a valid email')
    .required('Email is required'),
  password: yup
    .string('Enter your password')
    .min(8, 'Password should be of minimum 8 characters length')
    .required('Password is required'),
});

const WithMaterialUI = () => {
  const formik = useFormik({
    initialValues: {
      email: '[email protected]',
      password: 'foobar',
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return ( <
    div >
    <
    form onSubmit = {
      formik.handleSubmit
    } >
    <
    TextField fullWidth id = "email"
    name = "email"
    label = "Email"
    value = {
      formik.values.email
    }
    onChange = {
      formik.handleChange
    }
    onBlur = {
      formik.handleBlur
    }
    error = {
      formik.touched.email && Boolean(formik.errors.email)
    }
    helperText = {
      formik.touched.email && formik.errors.email
    }
    /> <
    TextField fullWidth id = "password"
    name = "password"
    label = "Password"
    type = "password"
    value = {
      formik.values.password
    }
    onChange = {
      formik.handleChange
    }
    onBlur = {
      formik.handleBlur
    }
    error = {
      formik.touched.password && Boolean(formik.errors.password)
    }
    helperText = {
      formik.touched.password && formik.errors.password
    }
    /> <
    Button color = "primary"
    variant = "contained"
    fullWidth type = "submit" >
    Submit <
    /Button> <
    /form> <
    /div>
  );
};

ReactDOM.render( < WithMaterialUI / > , document.getElementById('root'));

The integration with Material UI allows us to use Material UI components and offers more granular control over validation, highlighting, and error display.

Similarly, we can use Formik with Semantic UI 2.0 like so:

import React from 'react';
import { Formik } from 'formik';
import { Form, Input, SubmitButton, ResetButton } from 'formik-semantic-ui-react';

export const LoginForm = (props: any) => {
  const initialValues = {
    email: '',
    password: '',
  };

  return (
    

      { console.log('Form Submit' )} }
      >
        
      
    
  );
};

We used Semantic UI components like Form, Input, SubmitButton, and ResetButton. This example using Semantic UI with Formik shows how simple it is to integrate.

Many other third-party UI integrations are possible in Formik. You can check the Formik documentation directly for more details.

Further reading:

Let’s compare Formik to tools such as React Hook Form, Informed, react-ts-form, and traditional form management in React. The comparison will consider points such as features, performance, community, and documentation to help inform your choice:

This comparison table should serve as an efficient way to evaluate these form handling options at a high level. Keep in mind there are many other options you could consider as well; this is just a sample of some of the most popular.

Further reading:

Conclusion

Formik offers a reliable solution for managing forms of any size and complexity. Its comprehensive state management, smooth validation integration, and support for multi-step forms make it a performant and developer-friendly solution for React forms.

Using Formik in your React apps will significantly improve the way you handle forms, which will improve the productivity of your development process and the maintainability of your codebase.