Input PIN
Serie di input a carattere singolo per codici di verifica e inserimento OTP. Avanza automaticamente il focus all'inserimento, supporta incolla per compilare tutti i campi e navigazione con backspace tra gli input. Combina tutti i valori in un input nascosto per l'invio del form.
Anteprima e Codice
_pin_input.html.erb
███
███ █████ █████████ █████████
█████ █ █████ ████
███ ██████ ████████████ ███████ ██ █████ ███████████ ██████ █████████████ █████ ██
█████ █ ████████████ ████ ██████████
███ ██████ ████████████ ███████ ██ █████ ██████████████ ████████████████ ██ █████ █████████████ ██
█████ █ █████ ██████ ██████
pin_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ █████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ █████████ █
█
█████████ █
pin_input_component.rb
█ ██████████████████████ ████
█████ █████████████████ █ ███████████████████
█████ █ █
███ █ ██████ ████ ███ █████████ ████ █████████ ██
███ █ ██████ █████ ████ █████████ ████ ███████ ██
███ █ ██████ █████ ████ █████████ ████ ███████ █
████████
███ ███████████
pin_input_component.html.erb
█████
██ ██ ███████████████ ██
██████ ████████████ ███████ ███████████ ██████████████ ███████████████████ █████████ ██████ ██████████
██ ███ ██
████ ███████████████████████████
████████████████████████████████ ███████ ███
██████████████████████████████ █████ ███
██████████ █████████████████ ████
██ █████████████ ██ ███ ██
pin_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ █████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ █████████ █
█
█████████ █
Registro delle modifiche
- 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
Ottieni l'Accesso Completo
Sblocca il codice sorgente di questo componente e di tutti gli altri. Un solo pagamento per l'accesso a vita.
Ottieni l'Accesso Ora