formik-and-yup-sample.js

import React from 'react';
import { useFormik } from 'formik';
import styled from 'styled-components';
import * as yup from 'yup';

let validationSchema = yup.object().shape({
  email: yup.string().email().required(),
  password: yup.string().min(5).max(25).required(),
});

const Form = styled.form`
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  & label {
    border-left: 2px solid #ccc;
    padding-left: 5px;
    margin-bottom: 5px;
  }
  & input {
    padding: 5px;
    margin-bottom: 10px;
  }
  & button {
    border: 1px solid #ccc;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 15px;
  }
  & .validation-error {
    margin: 5px 0 15px 0;
    color: red;
  }
`

const LoginForm = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    validationSchema,
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <Form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      <span className="validation-error">{formik.errors.email}</span>
      <label htmlFor="password">Password</label>
      <input
        id="password"
        name="password"
        type="password"
        onChange={formik.handleChange}
        value={formik.values.password}
      />
      <span className="validation-error">{formik.errors.password}</span>
      <button disabled={formik.isSubmitting || !formik.isValid || !formik.dirty} type="submit">Submit</button>
    </Form>
  );
}

export default LoginForm;