Components / OTP Input
OTP Input
One-time password input with individual digit boxes, auto-advance, paste support.
forms v0.5.0
Playground
Examples
Default
<cg-otp-input length="6"></cg-otp-input> Masked
<cg-otp-input length="4" mask></cg-otp-input> Import
import { CgOtpInput } from '@cognivo/components'; // Or tree-shake: import '@cognivo/components/cg-otp-input'; Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 6 | Number of digits |
mask | boolean | false | Show dots instead of digits |
error | boolean | false | Error state |
rounded | "none" | "sm" | "md" | "lg" | "full" | "md" | Border radius variant |
Events
| Event | Detail | Description |
|---|---|---|
cg-otp-complete | {value} | All digits entered |