PinInput Component
React PIN / OTP input with auto-advance, smart Backspace, full-code paste, numeric or alphanumeric modes, masking and one-time-code autofill.
Import
javascript
1import { PinInput } from "@neuctra/ui";Basic Usage
Typing auto-advances; Backspace clears and steps back; pasting distributes the whole code.
Fill all six boxes (paste works too)
Masked & Alphanumeric
Sizes & Error
Props
All available props for the PinInput component.
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 4 | Number of character boxes |
| value / defaultValue | string | "" | Controlled / uncontrolled code |
| onChange | (value: string) => void | — | Fired on every keystroke |
| onComplete | (value: string) => void | — | Fired once all boxes are filled |
| type | "numeric" | "alphanumeric" | "numeric" | Accepted characters (sets the mobile keyboard too) |
| mask | boolean | false | Render dots instead of characters |
| size | "sm" | "md" | "lg" | "md" | Box size |
| error | boolean | false | Destructive border state |
| autoFocus | boolean | false | Focus the first box on mount |
| disabled | boolean | false | Lock all boxes |
| label | string | "PIN input" | Accessible group label (aria-label); not rendered visibly |
| boxClassName | string | — | Styles each individual character box. |
Accessibility
- Each box has an aria-label ("Character 2 of 6") inside a labelled group.
- The first box sets autocomplete="one-time-code" so iOS/Android offer SMS autofill.
- Arrow keys move between boxes; focus selects the existing character for easy overwrite.
Frequently Asked Questions
How do I install and import the PinInput component?
Install the @neuctra/ui package, then import it with: import { PinInput } from "@neuctra/ui";
What variants and sizes does PinInput support?
PinInput supports sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the PinInput component accessible?
PinInput is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.