Saisie de code PIN
Série de champs à caractère unique pour les codes de vérification et la saisie OTP. Le focus avance automatiquement à la saisie, le collage remplit tous les champs, et la touche retour arrière navigue entre les champs. Combine toutes les valeurs dans un champ caché pour la soumission du formulaire.
Aperçu et code
_pin_input.html.erb
███
███ █████ █████████ █████████
█████ █ █████ ████
███ ██████ ████████████ ███████ ██ █████ ███████████ ██████ █████████████ █████ ██
█████ █ ████████████ ████ ██████████
███ ██████ ████████████ ███████ ██ █████ ██████████████ ████████████████ ██ █████ █████████████ ██
█████ █ █████ ██████ ██████
pin_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ █████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ █████████ █
█
█████████ █
pin_input_component.rb
█ ██████████████████████ ████
█████ █████████████████ █ ███████████████████
█████ █ █
███ █ ██████ ████ ███ █████████ ████ █████████ ██
███ █ ██████ █████ ████ █████████ ████ ███████ ██
███ █ ██████ █████ ████ █████████ ████ ███████ █
████████
███ ███████████
pin_input_component.html.erb
█████
██ ██ ███████████████ ██
██████ ████████████ ███████ ███████████ ██████████████ ███████████████████ █████████ ██████ ██████████
██ ███ ██
████ ███████████████████████████
████████████████████████████████ ███████ ███
██████████████████████████████ █████ ███
██████████ █████████████████ ████
██ █████████████ ██ ███ ██
pin_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ █████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ █████████ █
█
█████████ █
Journal des modifications
- 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
Obtenir l'accès complet
Débloquez le code source de ce composant et de tous les autres. Paiement unique pour un accès à vie.
Obtenir l'accès maintenant