OTP Input

A one-time password input with individual character fields. Supports auto-focus, paste handling, and a completion callback.

Installation

npm install @bloomkit/react

import { OTPInput } from "@bloomkit/react";
 
<OTPInput length={6} onComplete={(code) => console.log(code)} />

const [value, setValue] = useState("");
 
<OTPInput length={6} value={value} onChange={setValue} />

<OTPInput length={4} onComplete={(pin) => verify(pin)} />

<OTPInput length={6} autoFocus />

<OTPInput length={6} disabled />

Prop	Type	Default	Description
length	number	6	Number of input fields
value	string	—	Controlled value
onChange	(value: string) => void	—	Called on each character change
onComplete	(value: string) => void	—	Called when all fields are filled
disabled	boolean	false	Prevents interaction
autoFocus	boolean	false	Focuses the first field on mount
className	string	""	Additional Tailwind classes