Introduction to Formik
What Formik Provides
Formik is a popular form library that manages values, validation errors, touched fields, and submission state for you, similar in spirit to react-hook-form but built around a slightly different, more declarative API using a <Formik> component.
Note: Formik is often chosen when a project already uses Yup for schema-based validation, since the two integrate directly.
Warning: It's an npm package — it must be installed in a real project and can't execute in this CDN-only sandbox.
Example: What Formik Provides
// Run in your local React project (npm install required)
import { Formik, Form, Field } from 'formik';
function App() {
return (
<Formik initialValues={{ email: '' }} onSubmit={values => console.log(values)}>
<Form>
<Field name="email" placeholder="Email" />
<button type="submit">Submit</button>
</Form>
</Formik>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Adding Validation with Yup
Formik pairs naturally with Yup, a schema-validation library, via the validationSchema prop. Instead of writing your own if-statements, you describe the shape and rules your data must match, and Formik runs that validation automatically on change and submit.
Note: Yup schemas read almost like English: yup.string().email().required() describes exactly what's expected.
Warning: Without validationSchema, referencing 'errors.email' in your JSX will just always be undefined — nothing populates it automatically.
Example: Adding Validation with Yup
// Run in your local React project (npm install required)
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as yup from 'yup';
const schema = yup.object({ email: yup.string().email().required() });
function App() {
return (
<Formik initialValues={{ email: '' }} validationSchema={schema} onSubmit={v => console.log(v)}>
<Form>
<Field name="email" />
<ErrorMessage name="email" component="p" />
</Form>
</Formik>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Using the useFormik Hook Directly
Instead of the <Formik> component and JSX children pattern, Formik also offers a useFormik hook that returns values, handleChange, handleSubmit, and errors directly — closer in style to how react-hook-form or plain useState-based forms are written.
Note: Choose useFormik when you want more manual control over each input's JSX, and the <Formik>/<Field> component style when you want less boilerplate.
Warning: Don't mix both styles (<Formik> component AND useFormik) in the same form — pick one API and stay consistent.
Example: Using the useFormik Hook Directly
// Run in your local React project (npm install required)
import { useFormik } from 'formik';
function App() {
const formik = useFormik({
initialValues: { email: '' },
onSubmit: values => console.log(values),
});
return (
<form onSubmit={formik.handleSubmit}>
<input name="email" value={formik.values.email} onChange={formik.handleChange} />
<button type="submit">Submit</button>
</form>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Not wrapping fields with Formik's <Field> component or the render-prop API, losing automatic value/onChange wiring.
- Forgetting validationSchema, so no validation runs even though errors are referenced in JSX.
- Mixing manual useState with Formik's own values, causing two sources of truth for the same field.
- Formik is an npm form library providing values, errors, and handlers via a single <Formik> component or useFormik hook.
- It commonly pairs with Yup for declarative validationSchema definitions.
- The <Field> component auto-wires name, value, and onChange for an input.
- onSubmit receives the final validated values object when the form is submitted successfully.
Requires npm install formik (and typically yup) — not available via CDN in this sandbox; works with React 16.8+.
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: