Multi-Select
Searchable dropdown that allows selecting multiple values, displayed as removable tags/chips in the input. Supports option grouping, max selections, search filtering, and select all/clear all actions.
Preview & Code
_multi_select.html.erb
███
████████████ █████████ █████████
██████
███ ██████ ██████████████████████████
████████ █
█ ██████ ███████ ██████ ██████ ██
█ ██████ █████████████ ██████ ████████████ ██
█ ██████ █████████ ██████ ████████ █
██
multi_select_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ███████████ █████████ ██████████████ ██████████ ██████████ ██████████
██████ ██████ █ █
█████ █ █████ ████████ ████████ █████ ██
█████████ █ █████ ██████ ████████ ██ ██
████████ █ █████ ██████ ████████ ██ ██
██████████████ ███████
███████████ █ █████ ████████ ████████ ████ ██
multi_select_component.html.erb
████ ██████████████ ███ ███████████████████████████████ ███
██ ██ ███████████████ ██
██████ ██████████ █████████████ ████
███ ██████ ██
████████
██ ███ ██
████ █████████████████
███ ███████ █ █████ ████████ ████ ██
multi_select_component.rb
█ ██████████████████████ ████
█████ ████████████████████ █ ███████████████████
███████████ ███████ ██████ █████████████ ███████████████ ██████████ ███████
████████████ ██████████ ████████████ ████████████████ █████
███ ███████████
████████ ███
█████████ ███
██████ ████
multi_select_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ███████████ █████████ ██████████████ ██████████ ██████████ ██████████
██████ ██████ █ █
█████ █ █████ ████████ ████████ █████ ██
█████████ █ █████ ██████ ████████ ██ ██
████████ █ █████ ██████ ████████ ██ ██
██████████████ ███████
███████████ █ █████ ████████ ████████ ████ ██
Changelog
- v1.0.0: Initial release
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now