input-otp is a React component for building one-time-password inputs that is accessible and unstyled.
The problem it solves is that HTML has no native OTP control, so developers typically build one from six separate inputs wired together with keydown handlers. This approach breaks browser features like SMS autofill, screen reader support, partial paste, undo, and standard keyboard bindings. input-otp instead renders a single invisible text input and provides the state needed to render any UI on top of it. Because there is still a real text field underneath, all browser functionality continues to work: SMS autofill via the autocomplete attribute, proper screen reader announcements with one control and one caret, standard keyboard shortcuts like select-all and undo, partial paste into the middle of a code, and correct form semantics with a single name and FormData entry.
The tool suits any project building two-factor or multi-factor authentication flows where you want full control over the visual presentation while maintaining accessibility and browser compatibility. It has zero dependencies, works with React versions from 16.8 onward, and is small enough to include without concern. The README notes that shadcn/ui wraps this library with pre-composed parts if you prefer a component-based API over the render prop pattern.
The project maintains active engagement with its ecosystem, as evidenced by sponsorship from authentication and infrastructure providers. Development appears focused on handling edge cases comprehensively, with dedicated documentation covering unusual scenarios that arise when a single invisible input must behave like multiple boxes. The API surface is deliberately minimal, consisting of five props, which suggests a philosophy of solving a specific problem well rather than expanding scope.
