Multiselect Dropdown
This module provides an improved user experience for selecting multiple options by displaying checkboxes within a dropdown menu. It offers features like select/clear all buttons, a search function, and direct form submission from the dropdown, and it can be used with entity reference and list fields. The module is designed to be accessible and aims for WCAG 2.2 AA compliance.
The Multiselect Dropdown module provides a form render element which displays checkboxes in a dropdown select-like element.
Features
- Better UX than the HTML
<select multiple>element or a long list of checkboxes. - Optional buttons for selecting or clearing all items in the dropdown.
- Optional search box for narrowing the items in the dropdown.
- Optional buttons to submit the form directly from the dropdown.
- Provides a form field widget for entity reference and list fields.
- Uses the native HTML
<dialog>element. - WCAG 2.2 AA compliance.
Configuration
Multiselect dropdown requires no configuration. See the module's README.md for more information on implementing multiselect dropdowns in Views or form render arrays.
Recommended modules
- Better Exposed Filters allows for multiselect dropdowns to be used as exposed filter widgets in views.
Browser Compatibility
The field widget uses the native HTML <dialog> element, a newer element not widely supported until 2022. The multiselect_dropdown_polyfill submodule provides a polyfill through GoogleChrome/dialog-polyfill which extends support through browsers released in or after 2019.
Accessibility
Multiselect dropdowns aim to be WCAG 2.2 AA compliant and provides additional text for screen readers on how to interact with the multiselect dropdown. If you find an issue, please create a new issue in the issue queue.