OTP Input

FREE

One-time code field with slots, grouping, masking, paste and SMS autofill support.

Playground

Change the props and watch the component and its code update live.

Props

Length

Group size (0 = none)

Characters

Mask

Size

Invalid

Focus color

Code

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

<OtpInput
  groupSize={3}
  onComplete={(code) => verify(code)}
/>

Terminal

npx @bloxa/cli add otp-input
# or: npx shadcn@latest add @bloxa/otp-input

Codes can be pasted and autofilled from SMS. onComplete fires when every slot is filled.

Enter the 6-digit code we sent you.

Every component also accepts the props of the element it renders.

Prop	Type	Default	Description
length	number	6	Number of characters.
value / defaultValue	string	—	Code value.
onValueChange	(value: string) => void	—	Called on every change.
onComplete	(value: string) => void	—	Called when every slot is filled.
pattern	"numeric" \| "alphanumeric"	"numeric"	Accepted characters.
groupSize	number	—	Separator after every N slots.
mask	boolean	false	Hides characters behind dots.
size	"md" \| "lg"	"md"	Slot size.