Component
PIN input
A row of individual boxes that auto-advance as digits are typed, support pasting a full code at once, and can mask each digit behind a dot.
The primitive
pin input.tsx
<NativePinInput length={6} value={value} onValueChange={setValue} secure />Example
A six-digit code entry confirming a login, auto-advancing as each digit lands.
Enter the code sent to your phone
pin-input-example.tsx
<NativePinInput length={6} value={code} onValueChange={setCode} />Capabilities
| Prop | Type | Description |
|---|---|---|
| length | 4 | 5 | 6 | — |
| valuerequired | string | — |
| onValueChangerequired | (value: string) => void | — |
| onComplete | (value: string) => void | — |
| secure | boolean | Mask characters like a password field |
| error | boolean | — |
| disabled | boolean | — |
| className | string | — |