{"id":26578834,"url":"https://github.com/pprunty/formik-otp-input","last_synced_at":"2025-07-15T03:37:24.533Z","repository":{"id":209307758,"uuid":"723701741","full_name":"pprunty/formik-otp-input","owner":"pprunty","description":"🪪 An elegant One-Time-Password (OTP) input field for React applications. Compatible with the Formik library, the component enables a configurable number of input values for the password, as well as user controlled automation features. NPM: https://www.npmjs.com/package/formik-otp-input DEMO: https://pprunty.github.io/formik-otp-input/","archived":false,"fork":false,"pushed_at":"2024-01-11T04:43:14.000Z","size":3755,"stargazers_count":2,"open_issues_count":8,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-06T11:42:16.526Z","etag":null,"topics":["2-factor-authentication","2fa","authentication","form","form-validation","formik","formik-yup","frontend","input","one-time-password","otp-verification","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pprunty.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-26T14:06:34.000Z","updated_at":"2024-08-21T22:17:12.000Z","dependencies_parsed_at":"2024-09-22T21:42:35.293Z","dependency_job_id":null,"html_url":"https://github.com/pprunty/formik-otp-input","commit_stats":null,"previous_names":["pprunty/formik-otp-input"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/pprunty/formik-otp-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pprunty%2Fformik-otp-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pprunty%2Fformik-otp-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pprunty%2Fformik-otp-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pprunty%2Fformik-otp-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pprunty","download_url":"https://codeload.github.com/pprunty/formik-otp-input/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pprunty%2Fformik-otp-input/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265398077,"owners_count":23758461,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2-factor-authentication","2fa","authentication","form","form-validation","formik","formik-yup","frontend","input","one-time-password","otp-verification","react","reactjs","typescript"],"created_at":"2025-03-23T05:17:14.224Z","updated_at":"2025-07-15T03:37:24.512Z","avatar_url":"https://github.com/pprunty.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://img.shields.io/npm/v/formik-otp-input)](https://www.npmjs.com/package/formik-otp-input)\n[![npm downloads](https://img.shields.io/npm/dm/formik-otp-input)](https://www.npmjs.com/package/formik-otp-input)\n[![npm minzip size](https://img.shields.io/bundlephobia/minzip/formik-otp-input)](https://www.npmjs.com/package/formik-otp-input)\n[![GitHub contributors](https://img.shields.io/github/contributors/pprunty/formik-otp-input)](https://github.com/pprunty/formik-otp-input/graphs/contributors)\n[![npm license](https://img.shields.io/npm/l/formik-otp-input)](https://www.npmjs.com/package/formik-otp-input)\n\n\nAuthor: [Patrick Prunty](https://pprunty.github.io/pprunty/).\n\n# formik-otp-input 🪪\n\n`formik-otp-input` is an enhancement to the [formik](https://github.com/jaredpalmer/formik) library, \ndesigned specifically for React applications. This extension introduces a specialized OTP (one-time-password) input\nfeature. It offers a customizable input field count for the password, along with user-defined props and options for  \n`autoFocus`, `autoSubmit`, `borderColor`, `highlightColor`, `textColor` and `backgroundColor`. The component is responsive,\nmeaning it is compatible with Android and iOS device browsers. Additionally, this \nextension supports autofill suggestions on mobile devices, which may vary based on the user's mobile or email service\nprovider, as well as the format of the email body send to the user's device.\n\nThe inspiration for this project came in part from the smooth checkout process experienced with [Stripe/Link payments](https://stripe.com/docs/payments/link).\nIts integration is versatile, making it suitable for a variety of applications, such as:\n\n1. Verification processes via email or mobile.\n2. Authentication workflows through email/SMS or passwordless systems.\n3. Two-factor authentication (2FA) for added security.\n4. Secure online payment and transaction confirmation.\n5. User registration and login procedures for web and mobile applications.\n6. Quick response actions in interactive customer service tools.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./demo.gif\" alt=\"Demo GIF\"\u003e\n\u003c/div\u003e\n\n\n## Demo 🚨\n\n#### 🖥️️ A live demo of this component is hosted on GitHub pages and can be previewed by following [THIS LINK](https://pprunty.github.io/formik-otp-input/).\n\n#### 🧑🏼‍💻 The source code used for the demo can be previewed by following [THIS LINK](https://github.com/pprunty/formik-otp-input/blob/main/demo/src/App.tsx).\n\n## Installation 💿\n\nInstall the package by running:\n\n### npm\n\n```sh\nnpm install formik-otp-input\n```\n\n### yarn\n\n```sh\nyarn install formik-otp-input\n```\n\n## Usage 🔨\n\n### Step 1: Import Necessary Modules\nStart by importing React, Formik, Yup, and the OtpInput component:\n\n```jsx\nimport React from 'react';\nimport { useFormik } from 'formik';\nimport * as Yup from 'yup';\nimport OtpInput from 'formik-otp-input';\n```\n\n### Step 2: Define Your OTP Length\nSet the length of your OTP. This will be used in the OtpInput component.\n\n```jsx\nconst YOUR_OTP_LENGTH = 6; // Replace this with the length of your OTP\n```\n\n### Step 3:  \n\n(Optional) Define CSS styles for your form elements. Adjust these styles according to your UI requirements.\n\n```jsx\nconst formStyle = { /* ... */ };\nconst fieldStyle = { /* ... */ };\nconst errorTextStyle = { /* ... */ };\nconst submitButtonStyle = { /* ... */ };\n```\n\n### Step 4:\n\nCreate a functional component for your form. Within this component, you will use Formik's useFormik hook to handle form state and submission.\n\n```jsx\nconst OtpForm = () =\u003e {\n    // Formik hook\n    const formik = useFormik({\n        initialValues: {\n            otp: '',\n            // ... other form fields if you wish\n        },\n        onSubmit: (values) =\u003e {\n            // Handle form submission\n        },\n    });\n\n    // Return the form JSX\n    return (\n        \u003cform style={formStyle} onSubmit={formik.handleSubmit}\u003e\n            {/* OtpInput component and other form elements go here */}\n        \u003c/form\u003e\n    );\n};\n```\n\n### Step 5: \n\nIntegrate the OtpInput component into your form. Pass relevant props to customize its behavior and appearance.\n\n```jsx\n\u003cOtpInput\n    length={YOUR_OTP_LENGTH}\n    value={formik.values.otp}\n    inputType={\"numeric\"}    // Options: numeric, alphabetic, alphanumeric\n    autoFocus={true}         // Auto-focus first digit\n    autoSubmit={true}        // Auto-submit form on full OTP entry\n    onBlur={formik.handleBlur}\n    onChange={formik.handleChange}\n    onFullFill={formik.handleSubmit}\n    setFieldError={formik.setFieldError}\n    setFieldTouched={formik.setFieldTouched}\n    highlightColor={'#4caf50'} // optional\n    // ... other props and style overrides\n    // textColor={'#FFFFFF'}\n    // backgroundColor={'#FFFFFF'}\n    // borderColor={'#FFFFFF'}\n    // ... override any pre-existing styles if required\n    // style={{\n    //     'backgroundColor': '#ffc300'\n    // }}\n/\u003e\n```\n\n### Step 6: Display Form Errors\n\n(Optional) Add a section to display form validation errors related to the OTP field.\n\n```jsx\n{formik.errors.otp \u0026\u0026 formik.touched.otp \u0026\u0026 (\n    \u003cdiv style={errorTextStyle}\u003e{formik.errors.otp}\u003c/div\u003e\n)}\n```\n### Step 7: Add a Submit Button\n\n(Optional - if `autoSubmit` is disabled) Include a submit button to allow users to submit the form.\n\n```jsx\n\u003cbutton type=\"submit\" style={submitButtonStyle} \u003eSubmit\u003c/button\u003e\n```\n\n### Step 8: Export the Form Component\n\nFinally, export your OtpForm component.\n\n```jsx\nexport default OtpForm;\n```\n\n### Full example\n\n\n```jsx\nimport React from 'react';\nimport { useFormik } from 'formik';\nimport * as Yup from 'yup';\nimport OtpInput from 'formik-otp-input';\n\nconst YOUR_OTP_LENGTH = 6; // Replace this with the length of your OTP\n\n\n// CSS Styles, adjust according to your needs\nconst formStyle = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    padding: '20px',\n};\n\nconst fieldStyle = {\n    margin: '10px 0',\n};\n\nconst errorTextStyle = {\n    marginTop: '15px',\n    fontSize: '14px',\n    color: '#ff6b6b',\n    marginBottom: '10px',\n};\n\nconst submitButtonStyle = {\n    padding: '10px 20px',\n    backgroundColor: '#4caf50',\n    color: 'white',\n    border: 'none',\n    borderRadius: '5px',\n    cursor: 'pointer',\n    marginTop: '20px',\n};\n\n// Form component\nconst OtpForm = () =\u003e {\n    const formik = useFormik({\n        initialValues: {\n            otp: '',\n            // ... other form fields if you wish\n        },\n        onSubmit: (values) =\u003e {\n            console.log('Form data:', values);\n            window.alert(`Submitted otp value = ${values.otp}`);\n            // Perform submission actions\n        },\n    });\n\n    return (\n        \u003cform style={formStyle} onSubmit={formik.handleSubmit}\u003e\n            \u003cOtpInput\n                length={YOUR_OTP_LENGTH}\n                value={formik.values.otp}\n                inputType={\"numeric\"}    // Default is numeric. Options are numeric, alphabetic or alphanumeric\n                autoFocus={true}    // Default is true. Will auto-focus first digit if true\n                autoSubmit={true}    // Default is true. Will auto-submit form onFullFill\n                onBlur={formik.handleBlur}   // Formik handler, used to handle onBlur events\n                onChange={formik.handleChange}   // Formik handler, used to handle change events\n                onFullFill={formik.handleSubmit}     // Formik handler, used to handle autoSubmit\n                setFieldError={formik.setFieldError}     // Formik handler, used to handle error rendering\n                setFieldTouched={formik.setFieldTouched}\n                // ... other props you can pass\n                highlightColor={'#4caf50'}\n                // textColor={'#FFFFFF'}\n                // backgroundColor={'#FFFFFF'}\n                // borderColor={'#FFFFFF'}\n                // ... override any pre-existing styles if required\n                // style={{\n                //     'backgroundColor': '#ffc300'\n                // }}\n            /\u003e\n            {formik.errors.otp \u0026\u0026 formik.touched.otp \u0026\u0026 (\n                \u003cdiv style={errorTextStyle}\u003e{formik.errors.otp}\u003c/div\u003e\n            )}\n            \u003cbutton type=\"submit\" style={submitButtonStyle} \u003eSubmit\u003c/button\u003e\n        \u003c/form\u003e\n    );\n};\n\nexport default OtpForm;\n```\n\n### Advanced Example\nTypically, one-time-password flow is a two-step process. The first, involves providing an email or mobile number and \nmaking an API call to the backend to trigger the generation of the one-time-password. The second, involves providing the\nOTP input field for the user to input before making a second API call to the server to validate the OTP. \n\nThe following example details how to integration the Index component in such a two-step process:\n\n```\ntodo: add example\n```\n\n## License 🎫\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpprunty%2Fformik-otp-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpprunty%2Fformik-otp-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpprunty%2Fformik-otp-input/lists"}