Formik.md

Formik

Can be integrated with [[Material-ui]] in [[Nextjs]] to create [[forms]]

Installation

npm install 

Docs

• Formik docs for setting up with Material-UI

Nextjs-MaterialUI Examples

Example use for simple Email/Password form & Submit button with [[Yup]] validation**

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}
		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}
		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'));