Password

The Password field is used to securely capture a user’s password while enforcing strong validation rules. This ensures that users create passwords that are both secure and meet application requirements.

In this example, the password input field includes the following features:

• Input type is set to password, so the characters are hidden as the user types.
• Validation rules enforce a strong password, requiring:
  • At least one uppercase letter
  • At least one lowercase letter
  • At least one number
  • At least one special character
  • A minimum length of 8 characters
• If the user enters a weak or invalid password, an appropriate error message is displayed.
• The field is mandatory before form submission.

This approach improves security by preventing weak passwords and guiding users to create safe credentials. This example uses the FormikFormBuilder to render a password input field for collecting a user’s password. The field is validated using Yup and defined in the passwordField config variable. Check Validation Rules for more detail.

Live Demo

Live Demo

Code Editor

import { Box, Button } from "@mui/joy";
import { Formik, Form } from "formik";
import { FormBuilder, useFormBuilder } from "formik-form-builder";

function Password() {
const passwordField: FieldType[] = [
{
  field: "password",
  type: InputTypes.TEXT,
  label: "Password",
  placeholder: "Enter your password",
  validation: {
    required: true,
    message: "Password is required",
   pattern:
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/,
    patternRuleMsg:
      "Password must be at least 8 characters and include uppercase, lowercase, number, and special character",
  },
  helperText: "Include uppercase, lowercase, number, and symbol",
  muiProps: {
    variant: "outlined",
    fullWidth: false,
    sx: { width: "300px" },
    type: "password",
  },
  gridProps: { xs: 12},
},
]
const { initailValues: initialValues, yupSchemaValidation } = useFormBuilder(passwordField);

return (
  <Formik
    initialValues={initialValues}
    validationSchema={yupSchemaValidation}
    onSubmit={(values, actions) => {
      console.log(values);
      alert(JSON.stringify(values, null, 2));
      actions.setSubmitting(false);
    }}
  >
    {({ values }) => (
      <Form>
        <FormBuilder
          group="form"
          values={values}
          data-test="form"
          fields={passwordField}
        />
        <Box
          width="100%"
          display="flex"
          justifyContent="center"
          alignItems="center"
          mt={2}
        >
          <Button variant="solid" type="submit">
            Submit
          </Button>
        </Box>
      </Form>
    )}
  </Formik>
);
};

export default Password;