react-otp-input

A fully customizable, one-time password input component for the web built with React.

Live Demo

Installation

To install the latest stable version:

npm install --save react-otp-input

Still using v2?

No problem! You can find the documentation for v2 here

Basic usage:

1import React, { useState } from 'react';
2import OtpInput from 'react-otp-input';
3
4export default function App() {
5  const [otp, setOtp] = useState('');
6
7  return (
8    <OtpInput
9      value={otp}
10      onChange={setOtp}
11      numInputs={4}
12      renderSeparator={<span>-</span>}
13      renderInput={(props) => <input {...props} />}
14    />
15  );
16}

API

const handlePaste: React.ClipboardEventHandler = (event) => {
  const data = event.clipboardData.getData('text');
  console.log(data)
};

⚠️ Warning

Do not override the following props on the input component that you return from the renderInput prop. Doing so might lead to unexpected behaviour.

• ref
• value
• onChange
• onFocus
• onBlur
• onKeyDown
• onPaste
• onInput
• type
• inputMode

Migrating from v2

The v3 of react-otp-input is a complete rewrite of the library. Apart from making the API more customizable and flexible, this version is a complete rewrite of the library using TypeScript and React Hooks. Here are the breaking changes that you need to be aware of:

• You now need to pass your own custom input component that will be rendered for each of the input fields via renderInput prop. This gives you the flexibility to customize the input fields as you desire. This also means that props like focusStyle, isDisabled, disabledStyle, hasErrored, errorStyle, isInputNum, isInputSecure, data-cy and data-testid are no longer supported. You can achieve the same functionality and more by passing the relevant props directly to the input component that you return from the renderInput prop.

• The separator prop has now been renamed to renderSeparator. This prop now apart from accepting a component that will be rendered as a separator between inputs like it used to, now also accepts a function that returns a component. The function will get the index of the separator being rendered as an argument.

• A new prop called inputType has been added to the component. This prop can be used to specify the type of the input that will be passed to the input element being rendered. The default value of this prop is number.

Migrating from v1

react-otp-input is now a controlled component to facilitate functionalities that weren't possible before from the application using it, such as clearing or pre-assigning values. For v1.0.0 and above, a value prop needs to be passed in the component for it to function as expected.

Development

To run the vite example:

cd example
npm run dev

Checklist

• Write tests
• Add actions for lint checks and tests

Contributing

Feel free to open issues and pull requests!

License

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Abhishek Warokar 💻 🎨 🚧 🤔 👀	Aj 💻 🎨 🤔	Aromal Anil 💻 🔧	Gabriele Corti 💻 ️️️️♿️	Anoop 💻	Dewansh Rawat 🐛	Ishan Chhabra 💻
yaojie 💻	Prateek Surana 💻 🚧 🤔 📖 🎨	Süleyman Barış Eser 🐛	Steve Domino 💻	Stephen Hogan 💻

This project follows the all-contributors specification. Contributions of any kind welcome!