PIN-Eingabe
Reihe von Einzelzeichen-Eingabefeldern für Verifizierungscodes und OTP-Eingabe. Springt automatisch zum nächsten Feld bei Eingabe, unterstützt Einfügen zum Ausfüllen aller Felder und Rücktaste-Navigation zwischen Eingaben. Kombiniert alle Werte in einem versteckten Eingabefeld zur Formularübermittlung.
Vorschau & Code
_pin_input.html.erb
███
███ █████ █████████ █████████
█████ █ █████ ████
███ ██████ ████████████ ███████ ██ █████ ███████████ ██████ █████████████ █████ ██
█████ █ ████████████ ████ ██████████
███ ██████ ████████████ ███████ ██ █████ ██████████████ ████████████████ ██ █████ █████████████ ██
█████ █ █████ ██████ ██████
pin_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ █████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ █████████ █
█
█████████ █
pin_input_component.rb
█ ██████████████████████ ████
█████ █████████████████ █ ███████████████████
█████ █ █
███ █ ██████ ████ ███ █████████ ████ █████████ ██
███ █ ██████ █████ ████ █████████ ████ ███████ ██
███ █ ██████ █████ ████ █████████ ████ ███████ █
████████
███ ███████████
pin_input_component.html.erb
█████
██ ██ ███████████████ ██
██████ ████████████ ███████ ███████████ ██████████████ ███████████████████ █████████ ██████ ██████████
██ ███ ██
████ ███████████████████████████
████████████████████████████████ ███████ ███
██████████████████████████████ █████ ███
██████████ █████████████████ ████
██ █████████████ ██ ███ ██
pin_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ █████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ █████████ █
█
█████████ █
Änderungsprotokoll
- Initial release with auto-advance, paste, and backspace navigation
- Hidden input for seamless form submission
- Optional separator dash for grouped codes (e.g. 123-456)
- Masked mode for sensitive inputs
- Three size variants: sm, md, lg
- Dark mode support
Vollzugang erhalten
Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.
Jetzt Zugang erhalten