OtpField
One-time password input with individual digit slots and automatic focus advancement.
Examples
Basic 6-Digit
Empty 6-digit OTP input. Type digits to fill.
Partially Filled
OTP with the first three digits pre-filled.
Disabled
OTP field that cannot be edited.
With Separator
OTP field with a visual separator between groups.
Invalid
OTP field with error styling.
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 { OtpField } from "@rokle/components";import { OtpField } from "@rokle/components";
export function Example() {
return <OtpField />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | Number of OTP digit slots. |
| onComplete | (otp: string) => void | - | Called when all slots are filled. |
| disabled | boolean | false | Disable interaction. |