React OTP Input Component

!npm version
!bundle size
!license
!TypeScript

A lightweight, accessible, and customizable OTP (One-Time Password) input component for React applications. Perfect for authentication flows, 2FA verification, and multi-digit code inputs.

✨ Features

- 🔢 Automatic Navigation - Auto-focuses next field on input
- ⌨️ Full Keyboard Support - Arrow keys, Backspace, Tab navigation
- ♿ Accessibility Focused - Screen reader friendly
- 📱 Mobile Optimized - Large touch targets, numeric keyboard
- 🎨 Easy to Style - Customizable CSS classes
- ⚡ Zero Dependencies - Lightweight and fast
- ✅ Input Validation - Only accepts numeric values
- 🔄 TypeScript Ready - Full type definitions included

📦 Installation

```bash
npm i custom-simple-otp


📖 Props
┌───────────┬───────────────────────────┬──────────┬─────────┬─────────────────────────────────────┐
│ Prop │ Type │ Required │ Default │ Description │
├───────────┼───────────────────────────┼──────────┼─────────┼─────────────────────────────────────┤
│ length │ number │ No │ 4 │ Number of OTP input fields (1-10) │
│ onSubmit │ (otp: number) => void │ Yes │ - │ Callback when all fields are filled │
│ isDisable │ boolean │ No │ false │ Disables all input fields │
└───────────┴───────────────────────────┴──────────┴─────────┴─────────────────────────────────────┘


🎨 Styling
The component uses CSS classes that you can easily override:

Default CSS Classes

.otp-container {
display: flex;
gap: 10px;
justify-content: center;
}

.otp-input-field {
width: 50px;
height: 50px;
text-align: center;
font-size: 24px;
border: 2px solid #e2e8f0;
border-radius: 8px;
transition: all 0.2s ease;
}

.otp-input-field:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.otp-input-field:disabled {
background-color: #f7fafc;
cursor: not-allowed;
}


⌨️ Keyboard Navigation
The component supports full keyboard navigation:

Key Action
Arrow Right (→) Move to next input field
Arrow Left (←) Move to previous input field
Backspace Clear current field and move to previous
Delete Clear current field
Tab Navigate through fields (standard tab order)
Shift + Tab Navigate backwards
Numbers (0-9) Input digit and auto-advance
Paste Paste digits (fills multiple fields)