Campo PIN
Série de campos de caractere único para códigos de verificação e entrada OTP. Avança automaticamente o foco ao digitar, suporta colar para preencher todos os campos e navegação com backspace entre campos. Combina todos os valores em um campo oculto para envio do formulário.
Pré-visualização e Código
_pin_input.html.erb
███
███ █████ █████████ █████████
█████ █ █████ ████
███ ██████ ████████████ ███████ ██ █████ ███████████ ██████ █████████████ █████ ██
█████ █ ████████████ ████ ██████████
███ ██████ ████████████ ███████ ██ █████ ██████████████ ████████████████ ██ █████ █████████████ ██
█████ █ █████ ██████ ██████
pin_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ █████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ █████████ █
█
█████████ █
pin_input_component.rb
█ ██████████████████████ ████
█████ █████████████████ █ ███████████████████
█████ █ █
███ █ ██████ ████ ███ █████████ ████ █████████ ██
███ █ ██████ █████ ████ █████████ ████ ███████ ██
███ █ ██████ █████ ████ █████████ ████ ███████ █
████████
███ ███████████
pin_input_component.html.erb
█████
██ ██ ███████████████ ██
██████ ████████████ ███████ ███████████ ██████████████ ███████████████████ █████████ ██████ ██████████
██ ███ ██
████ ███████████████████████████
████████████████████████████████ ███████ ███
██████████████████████████████ █████ ███
██████████ █████████████████ ████
██ █████████████ ██ ███ ██
pin_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ █████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ █████████ █
█
█████████ █
Changelog
- 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
Obter Acesso Completo
Desbloqueie o código-fonte deste componente e de todos os outros. Pagamento único para acesso vitalício.
Obter Acesso Agora