Fully functional OTP entry may be easier than you think.

Cloud Four's platform is a resource for web developers, offering insights into web development best practices, responsive design techniques, and performance optimization strategies. Through articles, case studies, and tutorials, Cloud Four offers insights into modern web development workflows, frontend frameworks, and progressive web app development. Readers can learn about web performance optimization, accessibility best practices, and responsive design patterns to create fast, accessible, and user-friendly web experiences. Additionally, Cloud Four provides updates on the latest web standards, browser APIs, and development tools to help developers stay ahead of the curve and build better web experiences.

Cloud Four

Build fully functional one-time passcode (OTP) inputs using semantic HTML with proper attributes like inputmode, autocomplete, and pattern validation. The approach demonstrates how to create accessible, progressively enhanced OTP forms without complex JavaScript frameworks or multiple input elements, using a single text input with clear labeling and optional styling enhancements through CSS and lightweight web components.

Simple One-Time Passcode Inputs

The trick is also to not have multiple inputs even if your design looks like 6 separate bubbles.
Just make the input invisible except the text and add high spacing between letters.
This trick alone saves you tons of javascript code.