Input tag
Input di testo che crea tag/chip rimovibili man mano che i valori vengono inseriti. Supporta validazione, limite massimo di tag e suggerimenti di autocompletamento. I tag possono essere aggiunti tramite tasto Invio, virgola o delimitatore personalizzato. Gli input nascosti vengono generati automaticamente per l'invio del form.
Anteprima e Codice
_tag_input.html.erb
███
███ █████ █████████ █████████
█████ █ ██████
███ ██████ ████████████ █████ █████████████ ██████ ███████ ████████████ ████ █ ███████ ██
█████ █ ████ ███████ ████ ███ ████
███ ██████ ████████████ █████ ████████ █████████ █████████ ██ █████ ████████████████ ██████ ████████ ██
█████ █ █████ ██████████ ████ ████████████
tag_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ ████████████ ██████████ ██████████████ ██████████
██████ ██████ █ █
█████ █ █████ ██████ ████████ ██ ██
████████ ███████
█████████ ███████
████████████ █ █████ ██████ ████████ ██ ██
████████████████ █ █████ ████████ ████████ █████ ██
tag_input_component.html.erb
█████
██ ██ ███████████████ ██
██████ ████████████ ███████ ███████████ ██████████████ ███████████████████ ███████████ ██████ ██████████
██ ███ ██
████ ███ ████████████████████ ████████████████ ███
████ ██████████ █████████████████ ███
█████████████████████████████████
██████████████████████████████████████████
tag_input_component.rb
█ ██████████████████████ ████
█████ █████████████████ █ ███████████████████
██████████ █ █
████████████ ███████████████████ █████████████ ████████████████████
███████████████ ██████████████████████ ████████████████ ███████████████████████
█████████████ ████████████████████ ██████████████ █████████████████████
██████████████ █████████████████████ ███████████████ ██████████████████████
████████████ ███████████████████ █████████████ ████████████████████
████████████ ███████████████████ █████████████ ████████████████████
tag_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ ████████████ ██████████ ██████████████ ██████████
██████ ██████ █ █
█████ █ █████ ██████ ████████ ██ ██
████████ ███████
█████████ ███████
████████████ █ █████ ██████ ████████ ██ ██
████████████████ █ █████ ████████ ████████ █████ ██
Registro delle modifiche
- Initial release with Enter/delimiter tag creation
- Autocomplete suggestions with keyboard navigation
- Email and URL validation modes
- Max tags limit with live counter
- Auto-colored tag chips option
- Hidden inputs for seamless Rails form submission
- 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