How to use Formik in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using Formik in React simplifies complex form handling by providing built-in state management, validation, and error handling with minimal boilerplate code.
As the creator of CoreUI with extensive React experience since 2014, I’ve implemented Formik in numerous enterprise applications for robust form management and user data collection.
The most efficient approach uses Formik’s useFormik hook to handle form state, validation, and submission in a clean, declarative manner.
This method provides comprehensive form functionality while maintaining excellent performance and developer experience for complex form scenarios.
Use Formik’s useFormik hook to handle form state, validation, and submission with minimal code.
import { useFormik } from 'formik'
import * as Yup from 'yup'
const ContactForm = () => {
const formik = useFormik({
initialValues: {
name: '',
email: '',
message: ''
},
validationSchema: Yup.object({
name: Yup.string()
.min(2, 'Name must be at least 2 characters')
.required('Name is required'),
email: Yup.string()
.email('Invalid email address')
.required('Email is required'),
message: Yup.string()
.min(10, 'Message must be at least 10 characters')
.required('Message is required')
}),
onSubmit: async (values, { setSubmitting, resetForm }) => {
try {
await submitForm(values)
resetForm()
} catch (error) {
console.error('Form submission error:', error)
} finally {
setSubmitting(false)
}
}
})
return (
<form onSubmit={formik.handleSubmit}>
<input
type="text"
name="name"
placeholder="Your Name"
value={formik.values.name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.name && formik.errors.name && (
<div className="error">{formik.errors.name}</div>
)}
<input
type="email"
name="email"
placeholder="Your Email"
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.email && formik.errors.email && (
<div className="error">{formik.errors.email}</div>
)}
<button type="submit" disabled={formik.isSubmitting}>
{formik.isSubmitting ? 'Submitting...' : 'Submit'}
</button>
</form>
)
}
This code demonstrates complete Formik integration with initial values, Yup schema validation, and submission handling. Formik manages form state automatically and provides handlers for input changes, validation triggering, and form submission. The validation schema defines rules and error messages, while the touch tracking ensures errors only display after user interaction. Formik’s built-in submission state management handles loading states and form reset functionality.
Best Practice Note:
This is the Formik pattern we use in CoreUI Pro form components for enterprise-grade form handling. Combine Formik with Yup validation and CoreUI form components for consistent, accessible, and maintainable form experiences.
