Mention Input
A textarea with inline mention support. Type a trigger character (default "@") to open a filterable dropdown of users or items. Supports keyboard navigation, avatar display, and stores structured mention data in a hidden input as JSON.
Preview & Code
_mention_input.html.erb
███
███████ █████ █████████ █████████
██████
███ ██████ ███████████████████████████
█████ ███████████
██████ ██████████
████████████ █████ █ ██ ███████ ████████████
████████ ████
██████ █
mention_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ███████████ █████████ ███████████
██████ ██████ █ █
████████ █ █████ ███████ ████████ ███ ██
██████ █ █████ ██████ ████████ ██ ██
███████████████ █ █████ ███████ ████████ █ █
█
mention_input_component.rb
█ ██████████████████████ ████
█████ █████████████████████ █ ███████████████████
███ █████████████████ ██████ ███ ████████████ ███ ████████ ████ ██████ ███ ████████████████ ██ ██████ ████ ████████
█████ █ ████
██████ █ █████
████████████ █ ███████████
████████ █ ███████
██████ █ █████
████████████████ █ ███████████████
mention_input_component.html.erb
████ ██████████ █████████████████ ███ ███ ████████████████████ ████████████████ ███
██ ██ ███████████████ ██
██████ ██████████ █████████████ ███████ ██████ ██████████
██ ███ ██
████ █████████████████
████ ██████████ ████████████████ ███
███████████████████████████████████████████
█████████
mention_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ███████████ █████████ ███████████
██████ ██████ █ █
████████ █ █████ ███████ ████████ ███ ██
██████ █ █████ ██████ ████████ ██ ██
███████████████ █ █████ ███████ ████████ █ █
█
Changelog
- Initial release with trigger character detection
- Filterable dropdown with keyboard navigation
- Avatar support with fallback initials
- Structured JSON mention data in hidden input
- Dark mode support
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now