formik-material-ui

This project extends Material-UI form field components and integrates formik with each of them.

Each of the components in this package uses useField hook from formik, so they must be used within a formik context.

Dependencies

{
  "@mui/icons-material": ">= 5",
  "@mui/material": ">= 5",
  "formik": ">= 2",
  "react": ">= 17",
  "react-dom": ">= 17"
}

Note: At the point I'm writing this, Formik has a type deprecated by React 18.

Version-1 Changelog

• Update from Material UI 4 to Material UI 5.
• The DatePicker component has been taken off, as there are lot of breaking changes going on from Material UI side.
• No breaking change in any other component.

Demo

Please find demos here.

TextField

Base API: TextField

Props: All props from TextField

Excluded props: error, onChange, onBlur, value (formik populates these props in actual Material-UI TextField component. Even if you provide any, they will get overriden by the formik ones.)

Required props: name (to bind with formik context)

Example:

import { Form, Formik } from 'formik';
import { TextField } from '@brainstationau/formik-material-ui';
...
<Formik
  initialValues={{ name: '' }}
  onSubmit={(values) => onSubmitMock(values)}
>
  {({ submitForm }) => (
    <Form>
      <TextField
        name="name"
        label="Full Name"
        id="full-name"
        helperText="I am here to help"
      />
      <button type="button" onClick={submitForm}>
        Submit
      </button>
    </Form>
  )}
</Formik>
...