Sometimes the smallest UI components end up being the most frustrating.
This week I deployed a small sandbox project after running into something surprisingly tricky: building a clean OTP input component in Angular.
On the surface it sounds simple, just a few input boxes for a one-time password. In reality, there are a lot of details you need to handle properly:
- Auto moving the cursor between inputs
- Handling paste events
- Restricting input to numbers
- Backspace navigation between fields
- Accessibility and keyboard navigation
- Avoiding weird focus behaviour
What I thought would take 30 minutes ended up taking about 6 hours. So I turned the result into a small public sandbox project so other developers don’t have to fight the same battle.
What the Component Supports
The OTP component handles a few things that are easy to get wrong:
- Auto-focus between inputs
- Backspace navigation
- Pasting the full OTP code
- Input validation
- Clean Angular component architecture
- Simple drop-in usage
Why I Built It
This wasn’t meant to be a full library.
It started as a scratch project while experimenting with Angular UI patterns.
But after the amount of time it took to get right, it felt worth sharing. If you're building authentication flows, this might save you a few hours.
Links
Portfolio
https://troy-krause-portfolio.vercel.app/
Repository
https://github.com/ST10248581/night-sky
Live Demo
https://night-sky-amber.vercel.app/
Final Thought
Sometimes the hardest problems aren’t complex systems, they’re the small UX details that users never notice when they work correctly. But when they break, everyone notices. If you’ve ever built an OTP input, you’ll know exactly what I mean.
Top comments (0)