@makozi/react-input-otp

A stylized OTP (One Time Password) input component for React with auto-focus, paste support, and accessibility.

---

Features

• Multiple input fields for OTP digits
• Auto-focus and keyboard navigation
• Paste support (entire OTP at once)
• Accessible with screen readers
• Customizable length and styling

---

Installation

npm install @makozi/react-input-otp

or with yarn:

yarn add @makozi/react-input-otp

Usage

import React, { useState } from 'react';
import { InputOTP } from '@makozi/react-input-otp';

const App = () => {
  const [otp, setOtp] = useState('');

  return (
    <div>
      <h2>Enter OTP</h2>
      <InputOTP
        length={6}
        onChange={(value) => setOtp(value)}
        autoFocus
      />
      <p>Current OTP: {otp}</p>
    </div>
  );
};


export default App;

Props

Prop	Type	Default	Description
length	number	6	Number of OTP digits
onChange	function	-	Callback with concatenated OTP value
autoFocus	boolean	true	Auto focus first input on mount
className	string	-	Custom wrapper class for styling

Styling

Each input is styled with a default width, height, border, and font size. You can override styles by passing a className to the component and targeting the input fields. Example (CSS)

.my-otp-wrapper input {
  border-color: #0078d4;
  background: #f0f6ff;
}

HomePage

Project Home: https://github.com/makozi/react-input-otp

Repository

Repository: https://github.com/makozi/react-input-otp

License

MIT © Makozi Marizu-Ibewiro