OTP Input

Pro

One-time code boxes that auto-advance, accept a pasted code and celebrate or shake on the result.

Check your inbox

Enter the 6-character code we sent to ana@studio.dev.

Demo code: 424242

Customize

Length6

Mask

Characters

Installation

OTP Input is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy otp-input.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { OtpInput } from "@/components/ui/otp-input";

<OtpInput
  length={6}
  name="code"
  error={wrong ? "That code didn't match." : false}
  success={verified}
  onComplete={(code) => verify(code)}
/>

Props

16 properties

Property	Type	Default	Description
length	number	6	Number of boxes.
value	string	—	Controlled code. Leave it out to let the boxes manage themselves.
defaultValue	string	""	Starting code when uncontrolled.
onChange	(code: string) => void	—	Called on every edit.
onComplete	(code: string) => void	—	Called once every box is filled.
error	boolean \| string	—	Marks the code wrong and shakes the boxes. A string is shown as the message.
success	boolean	false	Turns the boxes green with a wave.
mask	boolean	false	Shows dots instead of the characters.
charset	"numeric" \| "alphanumeric"	"numeric"	Which characters the boxes accept.
label	string	"One-time code"	Accessible name of the group.
color	string	"#ff784f"	Focus and caret color.
disabled	boolean	false	Blocks input.
autoFocus	boolean	false	Focuses the first box on mount.
name	string	—	Form field name. Submits the code through a hidden input.
id	string	—	Id of the first box, for an external label.
className	string	—	Extra classes for the wrapper.

Dependencies: motion