Input OTP

A row of glass cells for one-time codes. The focused cell gets an ember ring; filled cells settle into brighter glass.

Draw

draw a card

$npx shadcn@latest add @clow/input-otp

First time? Point @clow at the registry

Once per project, add the registry to your components.json. Then draw any card by name.

"registries": {
  "@clow": "https://clow.cards/r/{name}.json"
}

props

length

validationType

maskdisabled

<InputOtp />

basic

Verification code

verify

Pairing code

Hint: the code is 6142.

prop	type	default
length	number	6
validationType	numeric \| alpha \| alphanumeric \| none	numeric
mask	boolean	false
disabled	boolean	false