selectify

Selectify – Transform Drupal Forms with Modern, Accessible Components

Selectify styles select elements in four places, Manage Form Display (field widgets), Views exposed filters, Webform submission forms, and any other Form API select not covered by those three. It also styles radio buttons and checkboxes globally across the site. For both selects and radios/checkboxes, you can disable Selectify on any page (or set of pages) using path patterns.

Overview

Selectify is a comprehensive Drupal module that revolutionizes form interactions by transforming standard HTML form elements into modern, accessible, and highly customizable components. Whether you're working with Radio buttons, Checkboxes, or Select lists, Selectify provides elegant solutions that enhance both visual appeal and usability without compromising accessibility or functionality.

This module transforms default form elements into custom-styled, interactive components that serve users effectively. Forms become more intuitive, selections become clearer, and the overall user experience improves dramatically while maintaining full WCAG 2.1 Level AA accessibility compliance.

The idea for Selectify originally started as a feature within the Solo theme. By evolving it into a standalone module, Selectify became available to any Drupal site, regardless of theme, making professional-grade form enhancements accessible to the entire Drupal community.

Live Demo: https://unitedstarsofamerica.com/selectify

Key Features

• Five Specialized Select Widgets – Regular Dropdown, Taggable Dropdown, Searchable Dropdown, Checkbox Dropdown, and Dual-List Selector
• Radio & Checkbox Styling – Toggle switches and traditional styles with circle/square shapes and three size variants
• Four Integration Types – Field Widgets, Views Exposed Filters, Form API Selects, and Webform Elements
• Per-Form Configuration – Granular control for Views, Form API, and Webforms with automatic discovery
• Seven Color Themes – Professional accent colors with independent admin/front-end control
• Light & Dark Modes – Optimized color themes for both light and dark interfaces
• Full Accessibility – WCAG 2.1 Level AA compliant with comprehensive ARIA support
• Zero jQuery Dependency – Built with vanilla JavaScript ES6+ for optimal performance
• Theme Integration – Automatic theme detection with CSS custom properties

Integration Types

Selectify supports four distinct integration paths, each operating independently:

1. Field Widgets

Configure through Manage Form Display for entity fields (list_string, list_integer, list_float, entity_reference). Choose from five widgets per field with full control over selection limits and behavior.

2. Views Exposed Filters

Transform Views exposed select filters with three configuration modes:

• Disable Completely – Turn off Selectify for all Views filters
• Apply Site-Wide – One global widget for all exposed select filters
• Per-View Configuration – Granular control with accordion interface showing all displays with exposed filters

3. Form API Select Elements

Enhance plain Drupal Form API select elements with per-form configuration:

• Automatic Form Discovery – Forms with eligible select elements are automatically detected when pages are visited
• Per-Form Widget Selection – Table listing discovered forms with Form ID, last seen timestamp, and widget selection
• Built-in Safety – Automatic exclusion of AJAX-dependent forms, field widget selects, and admin forms
• Internal Blocklist – Always-excluded admin forms (Field UI, Views UI, Layout Builder, etc.) displayed for reference

4. Webform Elements

Requires the selectify_webform submodule. Enhance Webform submission forms with:

• Site-Wide Application – One widget for all Webforms with select elements
• Per-Webform Configuration – Different widgets per Webform with automatic discovery
• Composite Element Support – Handles nested selects in Select Other, Entity Select, Term Select, Likert, Mapping, Table Select, and custom composites
• Automatic Discovery – Only Webforms containing select-like elements are listed in configuration

Five Select Widgets

1. Regular Dropdown

Enhanced standard dropdown with modern styling and smooth animations. Perfect for straightforward selection with improved aesthetics.

2. Taggable Dropdown

Transform selections into removable tags for improved multi-select visualization. Each selection becomes a tag with a close button, providing immediate visual feedback.

3. Searchable Dropdown

Combines tagging with powerful search/filter capabilities. Real-time filtering with intelligent sorting by data type (text, numbers, emails, dates, entities). Ideal for large option lists (100+ items).

4. Checkbox Dropdown

Dropdown interface with explicit checkbox controls beside each option. Perfect for users who prefer clear visual indicators of selection state, especially in enterprise applications.

5. Dual-List Selector

Side-by-side list interface for intuitive multi-select operations. Available options on the left, selected options on the right. Familiar pattern from email clients and file managers. Ideal for permission systems and bulk operations.

Radio & Checkbox Enhancements

Transform traditional radio buttons and checkboxes with extensive styling options:

• Visual Styles: Toggle Switch (modern sliding switch) or Traditional with Indicators (enhanced checkbox/radio with X/Checkmark feedback)
• Shape Options: Circle (classic) or Square (contemporary)
• Size Variants: Small (compact), Medium (default), Large (accessibility-focused)
• Deselectable Radios: Unlike standard HTML, radio buttons can be deselected by clicking again
• State Management: Real-time visual feedback for checked, focused, hover, disabled, and indeterminate states
• Group Detection: Automatically identifies and manages radio/checkbox groups

Color Theme System

Choose from seven professional accent colors with independent control for admin and front-end:

• Neutral – Professional grayscale
• Slate – Cool, modern blue-gray tones
• Blue – Classic, trustworthy corporate blue
• Indigo – Deep, sophisticated purple-blue
• Teal – Fresh, modern blue-green
• Gold – Warm, prestigious yellow tones
• Coral – Vibrant, friendly orange-pink

Each color theme offers three modes:

• Light – Optimized for standard light backgrounds with 3D depth effects
• Dark – Designed for dark themes with inverted 3D effects
• None – Strips Selectify colors so form elements inherit theme styling

Accessibility & ARIA Compliance

Selectify follows WAI-ARIA 1.2 best practices ensuring full WCAG 2.1 Level AA compliance:

• Semantic Structure – Proper ARIA roles (combobox, listbox, option, group)
• Dynamic State Management – Real-time ARIA attribute updates (aria-expanded, aria-selected, aria-checked, aria-disabled)
• Comprehensive Keyboard Navigation – Full keyboard support with roving tabindex patterns
• Live Region Announcements – Screen reader feedback with debounced announcements
• Labeling & Description – Proper label association and description linking
• Focus Management – Predictable focus flow and return focus strategies
• Hidden Native Select – Maintains form submission while hiding from screen readers

Performance & Technical Details

• Zero jQuery Dependency – Built entirely with vanilla JavaScript ES6+
• Efficient Event Handling – Event delegation, Drupal.once(), throttled/debounced events
• Smart Resource Loading – Modular library structure loads only required components
• Minimal DOM Manipulation – CSS class toggles instead of inline styles
• MutationObserver – Efficient DOM change detection for dynamic content

Theme Integration

• Automatic Theme Detection – Each widget receives CSS classes for theme-specific styling
• Built-in Theme Support – Claro, Gin (with auto/light/dark mode detection), and Olivero
• CSS Custom Properties – Comprehensive variables for easy customization without touching core CSS

Recent Updates (Version 2.0.2+)

New Features

• Form API Integration – Per-form configuration with automatic form discovery
• Webform Submodule – Site-wide and per-Webform configuration for Webform elements
• Enhanced Views Integration – Improved per-View configuration UI
• Comprehensive Safety Features – AJAX detection, built-in blocklists, automatic exclusions
• Runtime Form Discovery – Automatic detection of forms with eligible select elements
• State Storage Management – Efficient storage of discovered forms with 1000-entry limit
• Defensive Programming – Enhanced error handling and input validation throughout

Improvements

• SelectifyWidgetBase – Abstract class reducing code duplication (~553 lines removed)
• SelectifyHelper Service – Per-request config caching replacing redundant static calls
• Shared Twig Partials – Eliminated duplicated wrapper markup across templates
• Independent Color Themes – Separate admin and front-end color controls
• Page-level disable – "Additional pages to disable Selectify" now disables all Selectify features (selects, radios, checkboxes) on matching paths
• Code Quality – PHPCS, PHPStan, ESLint, and Stylelint integration

Installation

Via Composer (Recommended):

composer require drupal/selectify
drush en selectify -y
drush cr

For Webform Integration:

composer require drupal/selectify_webform
drush en selectify_webform -y
drush cr

Requirements

• Drupal 10.2 or higher
• Drupal 11.x fully supported
• PHP 8.1+ with strict typing support
• Modern browser with JavaScript enabled
• Webform module (for selectify_webform submodule)

Configuration

Navigate to /admin/config/selectify/settings to configure:

• Page control settings (admin route exclusion, additional pages to disable—applies to all Selectify features: selects, radios, and checkboxes)
• Radio button styling (enable, style, shape, size)
• Checkbox styling (enable, style, shape, size)
• Front-end color theme (accent color, mode)
• Admin color theme (accent color, mode)
• Views exposed filters (disable, site-wide, or per-View)
• Form API selects (enable, per-form configuration)
• Webform elements (disable, site-wide, or per-Webform)

Support & Contributing

Issue Queue: https://www.drupal.org/project/issues/selectify

Source Code: https://git.drupalcode.org/project/selectify

Maintainer: Alaa Haddad – 27+ contributed Drupal modules and themes

Website: https://www.alaahaddad.com

License

This project is licensed under the GNU General Public License, version 2 or later: http://www.gnu.org/licenses/gpl-2.0.html