Campo PIN
Serie de campos de un solo carácter para códigos de verificación y entrada OTP. Avanza automáticamente el foco al escribir, soporta pegado para completar todos los campos y navegación con retroceso entre campos. Combina todos los valores en un campo oculto para el envío del formulario.
Vista Previa y Código
_pin_input.html.erb
███
███ █████ █████████ █████████
█████ █ █████ ████
███ ██████ ████████████ ███████ ██ █████ ███████████ ██████ █████████████ █████ ██
█████ █ ████████████ ████ ██████████
███ ██████ ████████████ ███████ ██ █████ ██████████████ ████████████████ ██ █████ █████████████ ██
█████ █ █████ ██████ ██████
pin_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ █████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ █████████ █
█
█████████ █
pin_input_component.rb
█ ██████████████████████ ████
█████ █████████████████ █ ███████████████████
█████ █ █
███ █ ██████ ████ ███ █████████ ████ █████████ ██
███ █ ██████ █████ ████ █████████ ████ ███████ ██
███ █ ██████ █████ ████ █████████ ████ ███████ █
████████
███ ███████████
pin_input_component.html.erb
█████
██ ██ ███████████████ ██
██████ ████████████ ███████ ███████████ ██████████████ ███████████████████ █████████ ██████ ██████████
██ ███ ██
████ ███████████████████████████
████████████████████████████████ ███████ ███
██████████████████████████████ █████ ███
██████████ █████████████████ ████
██ █████████████ ██ ███ ██
pin_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ █████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ █████████ █
█
█████████ █
Registro de Cambios
- 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
Obtener Acceso Completo
Desbloquea el código fuente de este componente y todos los demás. Un solo pago para acceso de por vida.
Obtener Acceso