Skip to main content

PAN Number

The PAN (Permanent Account Number) field is used to collect a valid PAN number from the user. It is commonly required in forms related to taxation, banking, and official identification.

In this example, we have implemented a PAN input field with the following features:

  • Accepts a 10-character alphanumeric value.
  • The format must match 5 uppercase letters, followed by 4 digits, and ending with 1 uppercase letter
    (e.g., ABCDE1234F).
  • Displays a validation error if the entered PAN does not follow the correct pattern.
  • Ensures the field is mandatory before submitting the form.

This helps maintain data integrity and ensures that only valid PAN numbers are collected in the form. This example uses the FormikFormBuilder to render a PAN input field for collecting a user’s PAN number. The field is validated using Yup and defined in the panField config variable. Check Validation Rules for more detail.

Live Demo

Code Editor


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

function PAN() {
const panField: FieldType[] = [
{
  field: "panNumber",
  type: InputTypes.TEXT,
  label: "PAN Number",
  placeholder: "Enter your PAN (e.g., ABCDE1234F)",
  validation: {
    required: true,
    pattern: /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/,
    message: "Enter a valid PAN number (ABCDE1234F)",
  },
  helperText: "PAN format: 5 letters, 4 digits, 1 letter (all uppercase)",
  muiProps: {
    variant: "outlined",
    fullWidth: false,
    sx: { width: "300px" },
  },
  gridProps: {xs: 12 },
},
];
const { initailValues: initialValues, yupSchemaValidation } = useFormBuilder(panField);

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={panField}
        />
        <Box
          width="100%"
          display="flex"
          justifyContent="center"
          alignItems="center"
          mt={2}
        >
          <Button variant="solid" type="submit">
            Submit
          </Button>
        </Box>
      </Form>
    )}
  </Formik>
);
};

export default Pan;