Tag-Eingabe
Texteingabe, die entfernbare Tags/Chips aus eingegebenen Werten erstellt. Unterstützt Validierung, maximale Tag-Anzahl und Autovervollständigungsvorschläge. Tags können per Eingabetaste, Komma oder benutzerdefiniertem Trennzeichen hinzugefügt werden. Versteckte Eingabefelder werden automatisch für die Formularübermittlung generiert.
Vorschau & Code
_tag_input.html.erb
███
███ █████ █████████ █████████
█████ █ ██████
███ ██████ ████████████ █████ █████████████ ██████ ███████ ████████████ ████ █ ███████ ██
█████ █ ████ ███████ ████ ███ ████
███ ██████ ████████████ █████ ████████ █████████ █████████ ██ █████ ████████████████ ██████ ████████ ██
█████ █ █████ ██████████ ████ ████████████
tag_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ ████████████ ██████████ ██████████████ ██████████
██████ ██████ █ █
█████ █ █████ ██████ ████████ ██ ██
████████ ███████
█████████ ███████
████████████ █ █████ ██████ ████████ ██ ██
████████████████ █ █████ ████████ ████████ █████ ██
tag_input_component.html.erb
█████
██ ██ ███████████████ ██
██████ ████████████ ███████ ███████████ ██████████████ ███████████████████ ███████████ ██████ ██████████
██ ███ ██
████ ███ ████████████████████ ████████████████ ███
████ ██████████ █████████████████ ███
█████████████████████████████████
██████████████████████████████████████████
tag_input_component.rb
█ ██████████████████████ ████
█████ █████████████████ █ ███████████████████
██████████ █ █
████████████ ███████████████████ █████████████ ████████████████████
███████████████ ██████████████████████ ████████████████ ███████████████████████
█████████████ ████████████████████ ██████████████ █████████████████████
██████████████ █████████████████████ ███████████████ ██████████████████████
████████████ ███████████████████ █████████████ ████████████████████
████████████ ███████████████████ █████████████ ████████████████████
tag_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ ████████████ ██████████ ██████████████ ██████████
██████ ██████ █ █
█████ █ █████ ██████ ████████ ██ ██
████████ ███████
█████████ ███████
████████████ █ █████ ██████ ████████ ██ ██
████████████████ █ █████ ████████ ████████ █████ ██
Änderungsprotokoll
- 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
Vollzugang erhalten
Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.
Jetzt Zugang erhalten