Tailwind CSS OTP Input Components
Dev Design Library indexes 60 Tailwind CSS otp input components from 27 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. Every library in this list styles its components with Tailwind CSS utility classes. Otp input components belong to the Inputs group.
Input Otpshadcn/ui · ReactAccessible one-time password component with copy paste functionality.
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)
Basic OTP input.ReUI · ReactBasic OTP input.
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
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 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.
Authenticator AppFLX UI · ReactAuthenticator App for Two-Factor Setup.
Alpha Numericsv-particles · Svelte
Otp FieldSpaceUI · ReactProvides individual segmented character boxes for typing verification codes and one-time passwords, with automatic…
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
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 Tailwind CSS otp input components
Related categories
- OTP Input Components
- React OTP Input Components
- Animated OTP Input Components
- shadcn/ui OTP Input Components
- Tailwind CSS Input Components
- Tailwind CSS Text Input Components
- Tailwind CSS Select Components
- Tailwind CSS Form Field Components
- Tailwind CSS Form Components
- Tailwind CSS Textarea Components
- Tailwind CSS Checkbox Components
- Tailwind CSS Switch Components
- Tailwind CSS Slider Components
- Tailwind CSS Radio Components
- Tailwind CSS Combobox Components
- Tailwind CSS File Upload Components
- Tailwind CSS Search Input Components
- Tailwind CSS Date Picker Components
- Tailwind CSS Login Form Components
- Tailwind CSS Color Picker Components