DOCS
v0.4

Components / OTP Input

OTP Input

One-time password input with individual digit boxes, auto-advance, paste support.

formsv0.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

PropTypeDefaultDescription
lengthnumber6Number of digits
maskbooleanfalseShow dots instead of digits
errorbooleanfalseError state
rounded"none" | "sm" | "md" | "lg" | "full""md"Border radius variant

Events

EventDetailDescription
cg-otp-complete{value}All digits entered