Better Exposed Filters
Replaces Views' default select boxes with more advanced widgets such as radio buttons, checkboxes, toggle links, sliders, and date pickers for exposed filters, sorts, and pagers.
better_exposed_filters
Install
composer require 'drupal/better_exposed_filters:^7.1'
Overview
Better Exposed Filters (BEF) enhances Drupal's Views exposed form elements by providing alternative display widgets that offer improved user experience and functionality. When you expose a filter in Views, you allow users to interact with the view and customize their search results. BEF gives you greater control over how these exposed elements are rendered.
The module replaces the standard single-select or multi-select dropdown boxes with more user-friendly options including checkboxes, radio buttons, clickable links, jQuery UI sliders for numeric ranges, and date pickers for date fields. It supports hierarchical displays for taxonomy terms, auto-submit functionality, collapsible filter groups, and secondary options for advanced search scenarios.
BEF works with all standard Views filter types including taxonomy, boolean, date, numeric, and string filters. It also integrates with Search API filters and provides extensibility through its plugin system for custom widget development.
Features
- Replace exposed filter dropdowns with checkboxes for multi-select filters or radio buttons for single-select filters
- Display exposed filters as clickable links that toggle filter values with AJAX support
- Use jQuery UI-based sliders for numeric range filters with configurable min, max, step, and animation settings
- Provide date picker widgets for date filters with automatic date format handling
- Auto-submit exposed forms when filter values change, with configurable delay and minimum character requirements for text fields
- Hide submit buttons when auto-submit is enabled for cleaner user interface
- Add 'Select All/None' links for checkbox filters with support for hierarchical nested selections
- Display checkbox and radio button options inline for compact layouts
- Implement 'soft limit' functionality to show/hide excess filter options via JavaScript with customizable show more/less labels
- Wrap filters in collapsible details elements for better organization
- Group filters into secondary options area for advanced search functionality
- Rewrite filter option labels using a simple text replacement interface
- Sort filter options alphabetically with proper handling of hierarchical taxonomy terms
- Combine sort field and sort order into a single dropdown for simplified user interface
- Add 'Reset sort' option to return to default sort order
- Support exposed pager elements (items per page) with radio button and link display options
- Provide theme hook suggestions for granular template overrides based on view, display, and field name
- Token support for filter descriptions when Token module is enabled
- Support for local nouislider library installation or CDN fallback
Use Cases
Product Catalog Filtering
Create an e-commerce product listing with checkbox filters for categories, a price range slider, and auto-submit for instant results. Enable 'Select All/None' for category filters and use soft limits to show only the first 10 categories with a 'Show more' link.
Advanced Search Form
Build a search page with primary filters visible (keywords, content type) and secondary filters in a collapsible 'Advanced Options' section (author, date range, tags). Use the secondary options feature to organize complex filter sets without overwhelming users.
Event Calendar Filtering
Create an events listing with date picker filters for start/end dates, radio button filters for event types, and link-based location filters with AJAX for seamless navigation without page reloads.
Hierarchical Taxonomy Navigation
Display a taxonomy term filter as nested checkboxes that reflect the vocabulary hierarchy. Enable 'nested all/none selection' so checking a parent term automatically selects all child terms.
Simplified Sort Controls
Combine sort field and sort order into a single dropdown showing options like 'Date (newest first)', 'Date (oldest first)', 'Title (A-Z)'. Rewrite the default labels to user-friendly text and add a 'Reset to default' option.
Mobile-Friendly Filters
Use collapsible filter groups to minimize vertical space on mobile devices. Enable auto-submit with hidden submit button for a streamlined touch interface where tapping a filter option immediately updates results.
Tips
- Use the theme hook suggestions to create view-specific or field-specific template overrides: bef_checkboxes__VIEW_ID__DISPLAY_ID__FIELD_NAME
- For slider widgets, calculate appropriate min/max/step values based on your actual data range to provide meaningful filter controls
- Combine auto-submit with the 'Hide submit button' option for the cleanest user interface when JavaScript is available
- Use the 'Rewrite based on key' option when you need consistent label rewrites regardless of translation or label changes
- When using soft limits, ensure your CSS properly handles the show/hide animation for a smooth user experience
- Token replacement in filter descriptions works well for dynamic help text like showing the current date or user information
Technical Details
Admin Pages 1
/admin/structure/views/view/{view_id}/edit
Configure Better Exposed Filters settings for a view by selecting 'Better Exposed Filters' as the exposed form style. Access BEF settings through the 'Exposed form style' option under the Advanced section of the view editor.
Hooks 3
hook_better_exposed_filters_options_alter
Alters BEF options before the exposed form widgets are built. Allows programmatic modification of filter settings such as slider min/max values.
hook_better_exposed_filters_display_options_alter
Alters the list of available widget options for a specific filter. Allows adding or removing widget choices for individual filters.
hook_theme_better_exposed_filters_options_alter
Theme-level alter hook for BEF options (same signature as module alter hook)
Troubleshooting 6
Ensure the nouislider library is properly loaded. Either install it locally in libraries/nouislider or verify CDN access is not blocked. Clear all caches after installing the library.
Check that auto-submit is enabled and 'Exclude Textfield' is not checked. Verify the minimum length setting - auto-submit won't trigger until the minimum character count is reached.
For taxonomy filters with hierarchy, do not include leading hyphens in the 'current text' field. The rewrite matches the actual option text, not the displayed text with hierarchy indicators.
This option requires 'Allow multiple selections' to be enabled in the filter settings. Edit the filter and check the 'Allow multiple selections' checkbox.
Ensure 'Allow people to choose the sort order' is enabled in the exposed form settings. The combine feature requires both sort field and sort order to be exposed.
Enable AJAX in the view's Advanced settings. The module automatically adds AJAX support for link widgets when the view has AJAX enabled.