Formik and Material-UI: Easy Form Handling in React

Formik simplifies form management in React, and Material-UI provides beautiful UI components. Combining them helps create robust forms with ease.

Why Use Formik with Material-UI?

Simplifies form state management
Handles validation easily
Integrates smoothly with Material-UI's styling and components

Setting Up Formik and Material-UI

Install the required dependencies:

npm install formik @mui/material @emotion/react @emotion/styled

Basic Example: Material-UI TextField with Formik

Here's how to use a TextField from Material-UI inside a Formik form:

import React from 'react'
import { Formik, Form, Field } from 'formik'
import { TextField } from '@mui/material'
import * as Yup from 'yup'

const validationSchema = Yup.object({
  firstName: Yup.string().required('Required'),
})

export default function FormikMUITextField() {
  return (
    <Formik
      initialValues={{ firstName: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => alert(JSON.stringify(values, null, 2))}
    >
      {({ errors, touched, handleChange, handleBlur }) => (
        <Form>
          <Field
            as={TextField}
            name="firstName"
            label="First Name"
            variant="outlined"
            fullWidth
            error={touched.firstName && Boolean(errors.firstName)}
            helperText={touched.firstName && errors.firstName}
            onChange={handleChange}
            onBlur={handleBlur}
          />
        </Form>
      )}
    </Formik>
  )
}

Explanation:

as={TextField} ensures Formik integrates with Material-UI's TextField.
error and helperText display validation messages.
handleChange and handleBlur keep Formik's state updated.

Using Formik's `Field` with a Custom Material-UI Component

Instead of repeating props for every field, create a reusable Formik-compatible component:

import { TextField } from '@mui/material'
import { useField } from 'formik'

const FormikTextField = ({ name, ...props }) => {
  const [field, meta] = useField(name)
  return (
    <TextField
      {...field}
      {...props}
      error={meta.touched && Boolean(meta.error)}
      helperText={meta.touched && meta.error}
    />
  )
}

Now, use it inside a Formik form:

<Field name="email" label="Email" component={FormikTextField} />

FAQ

1. How do I handle multiple fields in a Formik form?

Use multiple Field components, each mapped to a state property.

2. Can I use Material-UI buttons inside a Formik form?

Yes! Use Button with type="submit" inside a <Form> component.

<Button type="submit" variant="contained" color="primary">
  Submit
</Button>

3. How do I handle form submission?

Define an onSubmit function inside Formik and pass values to an API or state management system.

onSubmit={(values) => console.log(values)}