Breaking News: Grepper is joining You.com. Read the official announcement!

material ui formik

Kashif Siddique answered on November 8, 2021 Popularity 9/10 Helpfulness 5/10

answer material ui formik

related formik material ui

material ui formik

Comment

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: 'foobar@example.com',
      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'));

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: formik.org

Tags: formik javascript material-ui

Link to this answer
Share Copy Link

Contributed on Dec 29 2022

Kashif Siddique

0 Answers Avg Quality 2/10

Closely Related Answers

formik material ui

Comment

formik-mui v5 ---- https://github.com/stackworx/formik-mui
doc formik-mui v5 ----https://stackworx.github.io/formik-mui/
component formik-mui v5 --- https://codesandbox.io/s/915qlr56rp

Popularity 10/10 Helpfulness 3/10 Language whatever

Source: Grepper

Tags: formik fo

Link to this answer
Share Copy Link

Contributed on Nov 08 2021

Mystic Dev

0 Answers Avg Quality 2/10

material ui formik

Contents

More Related Answers

material ui formik

Closely Related Answers

formik material ui

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.