made with react.js

Input OTP

One-Time Password Component

Visit Site

Description

One-Time Password Component

"One invisible input, any UI you can imagine: input-otp is an accessible, unstyled, fully featured one-time-password component for React.

It renders exactly one real text input, paints it invisible, and hands you the state to draw whatever you want on top. Everything the browser gives a text field keeps working, because there is still a text field."

  • SMS autofillautocomplete="one-time-code" only means something on a single field
  • Screen readers – one control, one name, one value, one caret, one tab stop
  • Every keybinding you didn't implement – select-all, word-delete, shift-arrow ranges, undo, the iOS long-press menu
  • Real paste – including a partial paste into the middle of a half-filled code
  • Form semantics – one name, one entry in FormData, a real <label> that focuses it
  • Unstyled – no theme, no class names to override, no CSS to import
  • Small – zero dependencies

Creator

Guilherme Rodz
@guilherme_rodz


Social Media Links

unframer Design in Framer, Deploy in React
icon-eye-dark Created with Sketch. 408
Unpic Img React Responsive Image Component
icon-eye-dark Created with Sketch. 757
Sentry for React React Application Monitoring
💙 Sponsored by Friends
DocSearch Free Algolia Search For Developer Docs
icon-eye-dark Created with Sketch. 236
React Multi-Select Component Multiple Selection Dropdown
icon-eye-dark Created with Sketch. 2.316
Pintura Image Editor Component
icon-eye-dark Created with Sketch. 5.732