Chosen
Integrates the Chosen JavaScript library to transform standard HTML select elements into user-friendly, searchable dropdown widgets with enhanced multi-select capabilities.
chosen
Install
composer require 'drupal/chosen:^5.0'
Overview
The Chosen module provides Drupal integration for the Chosen JavaScript library, a popular jQuery plugin that transforms ordinary <select> elements into attractive, searchable dropdown menus. This module significantly improves the user experience when working with select fields, especially those with many options.
Chosen replaces native browser select elements with an enhanced interface that includes a search box for filtering options, visual indicators for selected items in multi-select fields, and support for placeholder text. The module automatically applies the Chosen behavior to select elements across your Drupal site based on configurable criteria.
The module supports both single-select and multi-select fields, respects field cardinality settings, provides Right-to-Left (RTL) language support, and offers specific styling for the Claro admin theme. It also integrates with the Better Exposed Filters module for Views exposed filters.
Features
- Transforms standard select elements into searchable dropdown menus with autocomplete-style filtering
- Supports multi-select fields with visual tag-like representation of selected items
- Configurable minimum option threshold to control when Chosen is applied based on the number of available options
- Search within option text with optional 'contains' search mode that matches anywhere in the option text
- Optional helper buttons (All/None) for quickly selecting or deselecting all options in multi-select fields
- Allows single deselect option for single-select fields when an empty default option exists
- Mobile device support toggle to enable or disable Chosen on mobile browsers
- Per-theme CSS customization with ability to disable Chosen's default CSS for specific themes
- Claro admin theme-specific styling for seamless integration with Drupal's default admin theme
- Better Exposed Filters integration for Views exposed filter forms
- RTL (Right-to-Left) language support with automatic detection
- Configurable width settings with support for both pixel and percentage-based widths
- Drush command for easy library installation
- Field widget plugin for entity reference and list fields
- Migration support from Drupal 7 with automatic settings and field widget migration
- jQuery selector-based configuration for targeting specific select elements
- Performance optimization with maximum results limit option
Use Cases
Improving taxonomy term selection on content edit forms
When content types have taxonomy reference fields with many terms (e.g., 50+ tags or categories), the standard select element becomes unwieldy. With Chosen, editors can quickly search and filter through large taxonomy vocabularies to find the terms they need.
Enhancing Views exposed filters
For Views with multiple exposed filters containing many options, Chosen transforms these into searchable dropdowns, making it easier for users to filter content. Combined with Better Exposed Filters, this provides a polished filtering experience.
Streamlining entity reference field selection
When referencing other entities (nodes, users, terms) through entity reference fields, Chosen's search capability helps users quickly find the correct reference from potentially hundreds of options.
Managing multi-value field selections
For fields allowing multiple selections (like multiple tags or categories), Chosen displays selected items as removable tags, providing clear visual feedback and easy management of selections.
Custom form implementations
Developers can force Chosen on specific form elements by adding #chosen => TRUE to the render array, or exclude elements with #chosen => FALSE or the 'chosen-disable' class.
Tips
- Use the 'chosen-enable' class on a select element to force Chosen, or 'chosen-disable' to prevent it
- Set #chosen property in form elements: #chosen => TRUE to force, #chosen => FALSE to disable
- For better performance with very large option lists, configure the 'Maximum shown results' setting
- The module automatically removes '_none' placeholder options from multi-select fields
- Field cardinality is respected - if a field allows 3 values, Chosen will limit selections to 3
- RTL language support is automatic based on the current language direction
Technical Details
Admin Pages 1
/admin/config/user-interface/chosen
Configuration page for the Chosen module. This page allows administrators to control how and where the Chosen JavaScript library is applied to select elements throughout the site. Settings include threshold controls, visual appearance options, and text customization.
Hooks 4
hook_element_info_alter
Used to add pre-render callbacks to select, date_combo, select_or_other, and synonyms_entity_select form elements
hook_field_widget_single_element_form_alter
Used to add entity type and bundle information to field widgets, enabling proper cardinality handling
hook_library_info_alter
Used by chosen_lib to dynamically set the path to the Chosen JavaScript library based on where it's installed
hook_migration_plugins_alter
Used to add the chosen migration process plugin to field widget migrations when migrating from Drupal 7
Drush Commands 1
drush chosen:plugin
Downloads and installs the Chosen JavaScript library to the libraries folder. This command automatically downloads the correct version of the library from the noli42/chosen GitHub repository and extracts it to the proper location.
Troubleshooting 5
Check that the Chosen library is properly installed in libraries/chosen. Visit the Status Report page to verify the library is detected. Also verify the jQuery selector in configuration matches your select elements.
Add the element's selector to the jQuery selector field using the :not() pseudo-selector. For example: select:not([name*='day'],[name*='year'],[name*='month']) to exclude date selects.
Either add your theme to the 'Disable the default Chosen theme' checkbox list, or create custom CSS overrides. The Claro theme has built-in compatibility.
The module includes special handling for Drupal modals. If issues persist, ensure the modal content is processed after Drupal behaviors attach.
Use the Drush command 'drush chosen:plugin' to automatically download and install the library, or manually download from https://github.com/noli42/chosen/releases and extract to libraries/chosen.