OTP Input Components
Dev Design Library indexes 70 otp input components from 36 open-source UI libraries, with the most coming from Watermelon UI, sv-particles, FLX UI, ReUI and Origin UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Otp input components belong to the Inputs group.
Input Otpshadcn/ui · ReactAccessible one-time password component with copy paste functionality.
Pin InputChakra UI · ReactUsed to capture a pin code or otp from the user
Input OtpHeroUI · ReactInput component for entering one-time passwords (OTP) with individual character slots, animations, and validation…
Otp Fieldcoss ui · ReactA segmented input for one-time passwords and verification codes.
Comp 324Origin UI · React- Pin InputPreline UI · JavaScript (HTML + Tailwind)
Pin InputArk UI · ReactFor pin or verification codes with auto-focus transfer and masking options.
Basic OTP input.ReUI · ReactBasic OTP input.
Pin InputPark UI · ReactA form input component for entering PIN codes and verification codes.
input-otpIntent UI · Reactinput-otp
Otp InputbeUI · ReactOne-time-code input with a gliding focus ring, digits that roll in per slot, error shake and a success check draw.
Otp InputTailGrids · ReactA component for entering one-time passwords.
OTP InputRare UI · ReactA one-time-code input whose characters roll into place behind a caret that slides from slot to slot.
Input OtpVengeance UI · React
Otp InputPanel UI · React NativeOne-time-code field drawn as a row of separate cells.
Otp Boxed InputOpenSourceUI · React
Pin InputKinetics · HTML/CSSEach digit pops and auto-advances to the next box
Input OtpBoardUI · ReactOne-time-code boxes with paste and autofill.
Input OtpObsidianUI · React
Input OtpShark UI · ReactAccessible one-time password input.
Input Otp 1Watermelon UI · React
OTP inputArc Library · ReactA six digit verification flow with paste support and keyboard navigation.
Otp InputUI Lab · ReactSix slots mirror one real input, so paste and SMS autofill just work.
Input OTPHextaUI · ReactOne-time code slots that take typing, paste and SMS autofill, with an opt-in animation that cascades codes in and a…
Input OTPCojeev UI · ReactPresents a single code input as a sequence of visible character slots.
OTP FieldROI UI · ReactA one-time password and verification code entry field.
Authenticator AppFLX UI · ReactAuthenticator App for Two-Factor Setup.
Input OtpHalaska UI · React
Alpha Numericsv-particles · Svelte
Otp InputPin UI · React
Otp FieldSpaceUI · ReactProvides individual segmented character boxes for typing verification codes and one-time passwords, with automatic…
Aria Input OtpReScript shadcn · ReScript
Otp InputEaseUI · ReactOne box per digit for a verification code, with paste and SMS autofill support and a shake for a wrong code.
OTP InputOpaline · ReactOne-time code cells on glass with a gliding lens, paste and SMS autofill, and success / error states.
Input OTPReactFrame · ReactA one-time-code input with individual animated cells, paste and autofill support, numeric or alphanumeric mode…
Pin Inputark-cn · ReactA shadcn-style pin input component built with Ark UI primitives.
Comp 44Origin UI · React
OTP input with numeric digits.ReUI · ReactOTP input with numeric digits.
Otp Underline InputOpenSourceUI · React
AuthBoardUI · React
Input Otp 10Watermelon UI · React
SMS CodeFLX UI · ReactSMS Code for Two-Factor Setup.
Basic Otpsv-particles · Svelte
Base Input OtpReScript shadcn · ReScript
Comp 45Origin UI · React
OTP input with multiple separators.ReUI · ReactOTP input with multiple separators.
Input Otp 2Watermelon UI · React
PasskeyFLX UI · ReactPasskey for Two-Factor Setup.
Masked Otp Fieldsv-particles · Svelte
Comp 58Origin UI · React
OTP input with letters and numbers.ReUI · ReactOTP input with letters and numbers.
Input Otp 3Watermelon UI · React
Backup CodesFLX UI · ReactBackup Codes for Two-Factor Setup.
With Auto Validationsv-particles · Svelte
OTP input for PIN codes.ReUI · ReactOTP input for PIN codes.
Input Otp 4Watermelon UI · React
Password Re-authFLX UI · ReactPassword Re-auth for Verify Identity.
With Custom Sanitizationsv-particles · Svelte
OTP input verification code.ReUI · ReactOTP input verification code.
Input Otp 5Watermelon UI · React
OTP ChallengeFLX UI · ReactOTP Challenge for Verify Identity.
With Field Labelsv-particles · Svelte
Input Otp 6Watermelon UI · React
Push ApprovalFLX UI · ReactPush Approval for Verify Identity.
With Placeholdersv-particles · Svelte
Input Otp 7Watermelon UI · React
BiometricFLX UI · ReactBiometric for Verify Identity.
With Separatorsv-particles · Svelte
Input Otp 8Watermelon UI · React
Input Otp 9Watermelon UI · React
Libraries with otp input components
Related categories
- React OTP Input Components
- Tailwind CSS OTP Input Components
- Animated OTP Input Components
- shadcn/ui OTP Input Components
- Input Components
- Text Input Components
- Select Components
- Form Field Components
- Form Components
- Textarea Components
- Switch Components
- Checkbox Components
- Slider Components
- Radio Components
- Combobox Components
- File Upload Components
- Search Input Components
- Date Picker Components
- Login Form Components
- Color Picker Components