DOCS
v0.4

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

PropTypeDefaultDescription
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

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