Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA short secret code in separate masked cells with auto-advance, Backspace stepping back, arrow navigation, paste spreading and a hidden form field.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for a PIN or passcode people type from memory, where hiding the digits matters. For an emailed or texted verification code use input-otp, which shows the digits.
Do not use it for long codes (more than 8 cells) or for text that is not a code. It does not check the code; do that in onComplete.
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 4 | Number of cells. |
value / defaultValue | string | - | Controlled or initial value. |
onValueChange | (value: string) => void | - | Called on every change. |
onComplete | (value: string) => void | - | Called when all cells are filled. |
mask | boolean | true | Show dots instead of characters. |
type | "numeric" | "alphanumeric" | numeric | Allowed characters. |
invalid, disabled | boolean | false | State. |
name | string | - | Name of the hidden form input. |
group; the first has autocomplete="one-time-code".inputmode="numeric" brings up the number pad on phones; masking uses type="password" and can be switched off.aria-invalid is set when invalid. A hidden input carries the full value for native forms.| Key | Action |
|---|---|
| Type | fills the cell and moves on |
| Backspace | clears, or steps back from an empty cell |
| ArrowLeft / ArrowRight | move between cells (mirrored in RTL) |
| Home / End | first / last cell |
| Paste | spreads over the cells |
The component ships a Testing Library test (pin-input.test.tsx) that covers masking and labels, auto-advance, filtering, Backspace, arrows, paste and the hidden input.