kapable

InputOTP

Forms · 1 export · v0.1.0 · showcase

Single native text input for one-time codes so autofill, paste, and leading zeroes remain intact.

Browse 72 component families

Preview

Verification code

Enter the six-digit code.

Usage

<InputOTP label="Verification code" name="code" length={6} pattern="[0-9]{6}" />

InputOTP props
prop	type	notes
label	string
name	string
length	number
id?	string
defaultValue?	string
inputMode?	'numeric' \| 'text'
pattern?	string
error?	string \| null
hint?	RemixNode
required?	boolean
disabled?	boolean
readOnly?	boolean
autoComplete?	'one-time-code' \| 'off'
enterKeyHint?	'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'
mix?	MixInput