Skip to content

ismalzikri/React-Otp-Input-Component

Repository files navigation

React-Otp-Input-Component

Introduction

The OTP input component build with React + vite, the idea of this project is when i got errand of my role as a frontend engineer, the UI team challenges me to build the OTP verification experience look different & more interactive.

And I thought you can reuse the logic & improve with your own version.

you can find another version build using Vue with the same logic. https://github.com/Laravel007/Vue-Otp-Input-Component

Feature :

  • Autofocus cursor when first render.
  • Validation first item input required.
  • Auto-move cursor to next input.
  • Auto-trigger something when the last input field filled
  • Bottom radar active change color when input is filled or not.

Reference :

https://www.tiket.com/login

Usage

  • don't forget to install pnpm
  • you can clone this repo
  • pnpm install
  • pnpm dev ( run on dev server )