Customizable One-time Password Input Component – react18-input-otp


A fully customizable, one-time password (OTP), phone number, and pin code input component for React powered apps.

Key Features:

  • It works great on both react and ionic app. Works like a charm on mobile too.
  • You can specify only numeric inputs with inputNum prop.
  • Works perfectly with clipboard paste feature on web and mobile.
  • The only OTP input package on npm that supports ‘enter’ key to submit.
  • Zero OTP paste issues on Android.
  • Easy paste on iOS chrome, read from SMS feature.
  • Supports onSubmit optional prop. You do not even need a button to submit.
  • You can use this package for phone number inputs too.
  • You can use this package for passcode fields too with inputSecure prop.
  • You can provide custom css as well as input props to the React18-input-otp.

Basic usage:

1. Install & Import.

# Yarn
$ yarn add react18-input-otp
$ npm i react18-input-otp
import React, { Component } from 'react';
import OtpInput from 'react18-input-otp';
// OR
import React, { useState } from 'react';
import OtpInput from 'react18-input-otp';

2. Add the OtpInput component to the app.

export default class App extends Component {
  state = { otp: '' };
  handleChange = (otp) => this.setState({ otp });
  render() {
    return <OtpInput value={this.state.otp} onChange={this.handleChange} numInputs={6} separator={<span>-</span>} />;
// OR
export default function ReactOtpInput() {
  const [otp, setOtp] = useState('');
  const handleChange = (enteredOtp) => {
  return <OtpInput value={otp} onChange={handleChange} numInputs={6} separator={<span>-</span>} />;

3. All default props.

numInputs: 4,
onChange: (otp) => console.log(otp),
isDisabled: false,
shouldAutoFocus: false,
value: '',
isInputSecure: false,
onSubmit: (otp) => console.log(otp),


Customizable One-time Password Input Component

Add Comment