npmpackage.info

Gathering detailed insights and metrics for react-otp-input

Other packages similar to react-otp-input

input-otp

1.4.2

One-time password input component for React.

react18-input-otp

1.1.4

A fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React.

otp-input-react

0.3.0

React functional component for otp input

mui-one-time-password-input

5.0.0

A One-Time Password input designed for the React library MUI

Gathering detailed insights and metrics for react-otp-input

react-otp-input - 3.1.1 | npmpackage.info

react-otp-input

✔️ OTP Input Component for React

3.1.1

682

MIT

TypeScript

1.43 kB

22,071,326 3.1

Installations

npm install react-otp-input

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.17.1

NPM Version

9.6.7 Score

93.9

Supply Chain

93.8

Quality

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

11

Total

280

Closed

177

Merged

92

Issues

Open

32

Total

173

Closed

141

Releases

v3.1.1

Updated on Dec 12, 2023

v3.1.0

Updated on Sep 26, 2023

v3.0.4

Updated on Jul 22, 2023

3.0.3

Updated on Jul 22, 2023

v3.0.2

Updated on Apr 29, 2023

v3.0.1

Updated on Apr 23, 2023

View All 15 releases

Languages

TypeScript

CSS

HTML

JavaScript

TypeScript (75.88%)

CSS (19.19%)

HTML (2.72%)

JavaScript (2.2%)

Developer

devfolioco

Download Statistics

Total Downloads

22,071,326

Last Day

43,201

Last Week

214,094

Last Month

860,072

Last Year

8,874,093

GitHub Statistics

MIT License

682 Stars

217 Commits

426 Forks

9 Watchers

5 Branches

45 Contributors

Updated on May 07, 2025

Bundle Size

3.11 kB

Minified

1.43 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 45 Contributors

Package Meta Information

Latest Version

3.1.1

Package Id

react-otp-input@3.1.1

Unpacked Size

138.38 kB

Size

33.26 kB

File Count

NPM Version

9.6.7

Node Version

18.17.1

Published on

Dec 12, 2023

Total Downloads

Cumulative downloads

Total Downloads

22,071,326

Last Day

79%

43,201

Compared to previous day

Last Week

10.8%

214,094

Compared to previous week

Last Month

3.3%

860,072

Compared to previous month

Last Year

48%

8,874,093

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

react-otp-input

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

see here

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

You can also pass a function that returns a component, where the function will get the index of the separator being rendered as an argument.

Name	Type	Required	Default	Description
numInputs	number	true	4	Number of OTP inputs to be rendered.
renderInput	function	true	none	A function that returns the input that is supposed to be rendered for each of the input fields. The function will get two arguments: `inputProps` and `index`. `inputProps` is an object that contains all the props that should be passed to the input being rendered (Overriding these props is not recommended because it might lead to some unexpected behaviour). `index` is the index of the input being rendered.
onChange	function	true	console.log	Returns OTP code typed in inputs.
onPaste	function	false	none	Provide a custom onPaste event handler scoped to the OTP inputs container. Executes when content is pasted into any OTP field. Example: const handlePaste: React.ClipboardEventHandler = (event) => { const data = event.clipboardData.getData('text'); console.log(data) };
value	string / number	true	''	The value of the OTP passed into the component.
placeholder	string	false	none	Specify an expected value of each input. The length of this string should be equal to `numInputs`.
renderSeparator	component / function	false	none	Provide a custom separator between inputs by passing a component. For instance, `<span>-</span>` would add `-` between each input.
containerStyle	style (object) / className (string)	false	none	Style applied or class passed to container of inputs.
inputStyle	style (object) / className (string)	false	none	Style applied or class passed to each input.
inputType	<input> type	false	text	The type of the input that will be passed to the input element being rendered. In v2 `isInputNum` used to set the input type as `tel` and prevented non numerical entries, so as to avoid the spin buttons added to the inputs with input type `number`. That behaviour is still supported if you pass `tel` to the inputType prop.
shouldAutoFocus	boolean	false	false	Auto focuses input on initial page load.
skipDefaultStyles	boolean	false	false	The component comes with default styles for legacy reasons. Pass `true` to skip those styles. This prop will be removed in the next major release.

⚠️ 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} 💻

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

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.1

/10

Last Scanned on 2025-05-05

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-otp-input

Other packages similar to react-otp-input

react-otp-input

Installations

Developer Guide

Yes

CommonJS

18.17.1

9.6.7

Score

Pull Requests

11

280

177

92

Issues

32

173

141

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

3.11 kB

1.43 kB

Maintainers

Package Meta Information

Total Downloads

22,071,326

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

react-otp-input

Installation

To install the latest stable version:

Still using v2?

Basic usage:

API

⚠️ Warning

Migrating from v2

Migrating from v1

Development

To run the vite example:

Checklist

Contributing

License

Contributors ✨

10

10

10

3

0

0

0

0

0

0

0

0

3.1

/10