pin-input
Segmented PIN / one-time-code input with auto-advance and paste.
A segmented PIN / one-time-code input. It renders length single-character
cells that auto-advance as you type, walk back on Backspace, navigate with the
arrow keys, and distribute a pasted (or SMS-autofilled) code across the cells.
Installation
pnpm add @fluixi-ui/pin-input
Usage
import { PinInput } from '@fluixi-ui/pin-input';
<PinInput length={6} otp onComplete={verify} />
<PinInput type="alphanumeric" mask value={code()} onValueChange={setCode} />
Set otp to hint browsers and mobile OSes to offer the incoming SMS one-time
code (it sets autocomplete="one-time-code" on the first cell).
Props
| Prop | Type | Description |
|---|---|---|
length |
number |
Number of cells (default 6). |
value |
string |
Controlled value. |
defaultValue |
string |
Uncontrolled initial value. |
onValueChange |
(value: string) => void |
Fired on every change. |
onComplete |
(value: string) => void |
Fired once every cell is filled. |
type |
'numeric' | 'alphanumeric' |
Accepted characters (default numeric). |
mask |
boolean |
Render cells as password dots. |
otp |
boolean |
Enable the SMS one-time-code autocomplete hint. |
placeholder |
string |
Placeholder shown in empty cells. |
disabled |
boolean |
Disable all cells. |
readOnly |
boolean |
Render the value without allowing edits. |
name |
string |
Emit a hidden input of this name for form submits. |
Keyboard & paste
| Action | Behaviour |
|---|---|
| Type a character | Fills the cell and advances focus |
Backspace |
Clears the cell, or clears the previous cell and moves back when empty |
← / → |
Move between cells |
| Paste | Distributes the pasted code across the cells from the focused one |
Styling
The root is [data-pin-input]; each cell is [data-pin-input-field]. Override
the tokens --flx-ui-pin-size and --flx-ui-pin-gap to resize the cells.
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.