https://github.com/pprunty/formik-otp-input

🪪 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/
https://github.com/pprunty/formik-otp-input

2-factor-authentication 2fa authentication form form-validation formik formik-yup frontend input one-time-password otp-verification react reactjs typescript

Last synced: 3 months ago
JSON representation

Host: GitHub
URL: https://github.com/pprunty/formik-otp-input
Owner: pprunty
License: mit
Created: 2023-11-26T14:06:34.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2024-01-11T04:43:14.000Z (over 1 year ago)
Last Synced: 2025-07-06T11:42:16.526Z (3 months ago)
Topics: 2-factor-authentication, 2fa, authentication, form, form-validation, formik, formik-yup, frontend, input, one-time-password, otp-verification, react, reactjs, typescript
Language: TypeScript
Homepage:
Size: 3.58 MB
Stars: 2
Watchers: 1
Forks: 1
Open Issues: 8
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          [![npm version](https://img.shields.io/npm/v/formik-otp-input)](https://www.npmjs.com/package/formik-otp-input)

[![npm downloads](https://img.shields.io/npm/dm/formik-otp-input)](https://www.npmjs.com/package/formik-otp-input)

[![npm minzip size](https://img.shields.io/bundlephobia/minzip/formik-otp-input)](https://www.npmjs.com/package/formik-otp-input)

[![GitHub contributors](https://img.shields.io/github/contributors/pprunty/formik-otp-input)](https://github.com/pprunty/formik-otp-input/graphs/contributors)

[![npm license](https://img.shields.io/npm/l/formik-otp-input)](https://www.npmjs.com/package/formik-otp-input)

Author: [Patrick Prunty](https://pprunty.github.io/pprunty/).

# formik-otp-input 🪪

`formik-otp-input` is an enhancement to the [formik](https://github.com/jaredpalmer/formik) library, 

designed specifically for React applications. This extension introduces a specialized OTP (one-time-password) input

feature. It offers a customizable input field count for the password, along with user-defined props and options for  

`autoFocus`, `autoSubmit`, `borderColor`, `highlightColor`, `textColor` and `backgroundColor`. The component is responsive,

meaning it is compatible with Android and iOS device browsers. Additionally, this 

extension supports autofill suggestions on mobile devices, which may vary based on the user's mobile or email service

provider, as well as the format of the email body send to the user's device.

The inspiration for this project came in part from the smooth checkout process experienced with [Stripe/Link payments](https://stripe.com/docs/payments/link).

Its integration is versatile, making it suitable for a variety of applications, such as:

1. Verification processes via email or mobile.

2. Authentication workflows through email/SMS or passwordless systems.

3. Two-factor authentication (2FA) for added security.

4. Secure online payment and transaction confirmation.

5. User registration and login procedures for web and mobile applications.

6. Quick response actions in interactive customer service tools.



  



## Demo 🚨

#### 🖥️️ 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/).

#### 🧑🏼‍💻 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).

## Installation 💿

Install the package by running:

### npm

```sh

npm install formik-otp-input

```

### yarn

```sh

yarn install formik-otp-input

```

## Usage 🔨

### Step 1: Import Necessary Modules

Start by importing React, Formik, Yup, and the OtpInput component:

```jsx

import React from 'react';

import { useFormik } from 'formik';

import * as Yup from 'yup';

import OtpInput from 'formik-otp-input';

```

### Step 2: Define Your OTP Length

Set the length of your OTP. This will be used in the OtpInput component.

```jsx

const YOUR_OTP_LENGTH = 6; // Replace this with the length of your OTP

```

### Step 3:  

(Optional) Define CSS styles for your form elements. Adjust these styles according to your UI requirements.

```jsx

const formStyle = { /* ... */ };

const fieldStyle = { /* ... */ };

const errorTextStyle = { /* ... */ };

const submitButtonStyle = { /* ... */ };

```

### Step 4:

Create a functional component for your form. Within this component, you will use Formik's useFormik hook to handle form state and submission.

```jsx

const OtpForm = () => {

    // Formik hook

    const formik = useFormik({

        initialValues: {

            otp: '',

            // ... other form fields if you wish

        },

        onSubmit: (values) => {

            // Handle form submission

        },

    });

    // Return the form JSX

    return (

        

            {/* OtpInput component and other form elements go here */}

        

    );

};

```

### Step 5: 

Integrate the OtpInput component into your form. Pass relevant props to customize its behavior and appearance.

```jsx

```

### Step 6: Display Form Errors

(Optional) Add a section to display form validation errors related to the OTP field.

```jsx

{formik.errors.otp && formik.touched.otp && (

    
{formik.errors.otp}

)}

```

### Step 7: Add a Submit Button

(Optional - if `autoSubmit` is disabled) Include a submit button to allow users to submit the form.

```jsx

Submit

```

### Step 8: Export the Form Component

Finally, export your OtpForm component.

```jsx

export default OtpForm;

```

### Full example

```jsx

import React from 'react';

import { useFormik } from 'formik';

import * as Yup from 'yup';

import OtpInput from 'formik-otp-input';

const YOUR_OTP_LENGTH = 6; // Replace this with the length of your OTP

// CSS Styles, adjust according to your needs

const formStyle = {

    display: 'flex',

    flexDirection: 'column',

    alignItems: 'center',

    padding: '20px',

};

const fieldStyle = {

    margin: '10px 0',

};

const errorTextStyle = {

    marginTop: '15px',

    fontSize: '14px',

    color: '#ff6b6b',

    marginBottom: '10px',

};

const submitButtonStyle = {

    padding: '10px 20px',

    backgroundColor: '#4caf50',

    color: 'white',

    border: 'none',

    borderRadius: '5px',

    cursor: 'pointer',

    marginTop: '20px',

};

// Form component

const OtpForm = () => {

    const formik = useFormik({

        initialValues: {

            otp: '',

            // ... other form fields if you wish

        },

        onSubmit: (values) => {

            console.log('Form data:', values);

            window.alert(`Submitted otp value = ${values.otp}`);

            // Perform submission actions

        },

    });

    return (

        

            

            {formik.errors.otp && formik.touched.otp && (

                
{formik.errors.otp}

            )}

            Submit

        

    );

};

export default OtpForm;

```

### Advanced Example

Typically, one-time-password flow is a two-step process. The first, involves providing an email or mobile number and 

making an API call to the backend to trigger the generation of the one-time-password. The second, involves providing the

OTP input field for the user to input before making a second API call to the server to validate the OTP. 

The following example details how to integration the Index component in such a two-step process:

```

todo: add example

```

## License 🎫

This project is licensed under the MIT License.

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/pprunty/formik-otp-input

Awesome Lists containing this project

README