imitation
PinInput
Single-digit boxes for a confirmation code.
Sign-in codeSix digits, auto-advance, paste a whole code
In context
Confirm it is youA code sent to Maya before the Harbour launch kit unlocks
Check your email
We sent a six-digit code to maya@tideline.example. It lasts ten minutes.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
length | number | undefined | No | 6 |
value | string | undefined | No | — |
defaultValue | string | undefined | No | |
onChange | ((value: string) => void) | undefined | No | — |
onComplete | ((value: string) => void) | undefined | No | — |
aria-label | string | undefined | No | Verification code |
disabled | boolean | undefined | No | — |
mask | boolean | undefined | No | — |
className | string | undefined | No | — |
Behavior
- Typing a digit auto-advances focus to the next box
- Backspace on an empty box moves focus back to the previous one
- Pasting a full code splits it across every box starting from the focused one
onCompletefires once, only when every box is filled
Accessibility
The whole set is a real role="group" with a label; each box is labeled Digit N of length for screen readers, since a bare unlabeled sequence of inputs gives no sense of position or total count.
data-rebar-* attributes
data-rebar-component="pin-input"; data-rebar-part="digit" on each box.
Migrating to Ant Design
Not codemod-covered — AntD's Input.OTP is the closest equivalent, with a different prop shape (a single length and formatter rather than this component's per-box rendering).