"use client";
import React from 'react';
import { useFormik } from 'formik';
import * as yup from 'yup';
import { styled } from '@mui/material/styles';
import { TextField } from '@mui/material';
import { Typography } from '@mui/material';

import { Box, Button, Stack } from '@mui/material';

const CustomTextField = styled((props) => <TextField {...props} />)(({ theme }) => ({
  '& .MuiOutlinedInput-input::-webkit-input-placeholder': {
    color: theme.palette.text.secondary,
    opacity: '0.8',
  },
  '& .MuiOutlinedInput-input.Mui-disabled::-webkit-input-placeholder': {
    color: theme.palette.text.secondary,
    opacity: '1',
  },
  '& .Mui-disabled .MuiOutlinedInput-notchedOutline': {
    borderColor: theme.palette.grey[200],
  },
}));

const CustomFormLabel = styled((props) => (
  <Typography
    variant="subtitle1"
    fontWeight={600}
    {...props}
    component="label"
    htmlFor={props.htmlFor}
  />
))(() => ({
  marginBottom: '5px',
  marginTop: '25px',
  display: 'block',
}));

const validationSchema = yup.object({
  emailInstant: yup.string().email('Enter a valid email').required('Email is required'),
  passwordInstant: yup
    .string()
    .min(8, 'Password should be of minimum 8 characters length')
    .required('Password is required'),
});


  const formik = useFormik({
    initialValues: {
      emailInstant: '',
      passwordInstant: '',
    },
    validationSchema,
    onSubmit: (values) => {
      alert(values.emailInstant);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <Stack>
        <Box mt="-10px">
          <CustomFormLabel>Email Address</CustomFormLabel>
          <CustomTextField
            fullWidth
            id="emailInstant"
            name="emailInstant"
            value={formik.values.emailInstant}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            error={formik.touched.emailInstant && Boolean(formik.errors.emailInstant)}
            helperText={formik.touched.emailInstant && formik.errors.emailInstant}
          />
        </Box>
        <Box mb={3}>
          <CustomFormLabel>Password</CustomFormLabel>
          <CustomTextField
            fullWidth
            id="passwordInstant"
            name="passwordInstant"
            type="password"
            value={formik.values.passwordInstant}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            error={formik.touched.passwordInstant && Boolean(formik.errors.passwordInstant)}
            helperText={formik.touched.passwordInstant && formik.errors.passwordInstant}
          />
        </Box>
        <Stack direction="row" justifyContent="flex-end">
          <Button variant="contained" type="submit">
            Submit
          </Button>
        </Stack>
      </Stack>
    </form>
  );

"use client";
import React from 'react';
import { useFormik } from 'formik';
import * as yup from 'yup';
import { styled } from '@mui/material/styles';
import { Typography } from '@mui/material';
import { Select } from '@mui/material';

import { Box, Button, Stack, FormHelperText, MenuItem } from '@mui/material';

const CustomFormLabel = styled((props) => (
  <Typography
    variant="subtitle1"
    fontWeight={600}
    {...props}
    component="label"
    htmlFor={props.htmlFor}
  />
))(() => ({
  marginBottom: '5px',
  marginTop: '25px',
  display: 'block',
}));

const CustomSelect = styled((props) => <Select {...props} />)(({}) => ({}));

const validationSchema = yup.object({
  age: yup.number().required('Age selection is required.'),
});

const formik = useFormik({
    initialValues: {
      age: '',
    },
    validationSchema,
    onSubmit: (values) => {
      alert(values.age);
    },
});

<form onSubmit={formik.handleSubmit}>
    <Stack>
        <Box mt="-10px" mb={3}>
          <CustomFormLabel>Age</CustomFormLabel>
          <CustomSelect
            labelId="age-select"
            id="age"
            fullWidth
            name="age"
            value={formik.values.age}
            onChange={formik.handleChange}
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </CustomSelect>
          {formik.errors.age && (
            <FormHelperText error id="standard-weight-helper-text-email-login">
              {' '}
              {formik.errors.age}{' '}
            </FormHelperText>
          )}
        </Box>
        <Stack direction="row" justifyContent="flex-end">
          <Button variant="contained" type="submit">
            Submit
          </Button>
        </Stack>
    </Stack>
</form>

"use client";
import React from 'react';
import { useFormik } from 'formik';
import * as yup from 'yup';

import {
  Box,
  Button,
  Stack,
  FormControlLabel,
  FormControl,
  RadioGroup,
  Radio,
  FormHelperText,
} from '@mui/material';

const validationSchema = yup.object({
  color: yup.string().required('Color selection is required'),
});

const formik = useFormik({
    initialValues: {
      color: [],
    },
    validationSchema,
    onSubmit: (values) => {
      alert(values.color);
    },
});

<form onSubmit={formik.handleSubmit}>
  <Stack>
        <Box mt="-10px" mb={3}>
          <FormControl>
            <RadioGroup
              row
              aria-label="color"
              value={formik.values.color}
              onChange={formik.handleChange}
              name="color"
              id="color"
            >
            <FormControlLabel
              value="primary"
              control={
                <Radio
                  sx={{
                    color: 'primary.main',
                    '&.Mui-checked': { color: 'primary.main' },
                  }}
                />
              }
              label="Primary"
            />
            <FormControlLabel
              value="error"
              control={
                <Radio
                  sx={{
                    color: 'error.main',
                    '&.Mui-checked': { color: 'error.main' },
                  }}
                />
              }
              label="Error"
            />
            <FormControlLabel
              value="secondary"
              control={
                  <Radio
                    sx={{
                      color: 'secondary.main',
                      '&.Mui-checked': { color: 'secondary.main' },
                    }}
                  />
                }
                label="Secondary"
              />
            </RadioGroup>
          </FormControl>
        {formik.errors.color && (
          <FormHelperText error id="standard-weight-helper-text-email-login">
            {' '}
            {formik.errors.color}{' '}
          </FormHelperText>
        )}
      </Box>
      <Stack direction="row" justifyContent="flex-end">
        <Button variant="contained" type="submit">
          Submit
        </Button>
      </Stack>
  </Stack>
</form>