PinInput
Multi-slot PIN entry field for numeric or alphanumeric codes with individual character boxes.
Examples
Basic 4-Digit
Empty PIN input. Digits are masked.
Filled
All four PIN digits entered.
Disabled
PIN input in disabled state.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { PinInput } from "@rokle/components";import { PinInput } from "@rokle/components";
export function Example() {
return <PinInput />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 4 | Number of PIN character slots. |
| type | "numeric" | "alphanumeric" | "numeric" | Allowed character type. |
| onComplete | (pin: string) => void | - | Called when all slots are filled. |