Selectify (Drupal Module)

Overview

Selectify is a cutting-edge Drupal module I developed to enhance form usability by providing sleek, interactive, and accessible alternatives to standard Select lists, Radio buttons, and Checkboxes. With Selectify, default form elements are transformed into visually appealing, user-friendly components—without sacrificing accessibility or functionality.

Originally, Selectify started as a feature within my Solo theme. But to make it accessible to the entire Drupal community, I turned it into a standalone module. This way, it works with any theme and fits into all kinds of Drupal projects—from content editing forms to Views exposed filters and beyond.

Why Use Selectify?

Forms play a critical role in user engagement. Whether it’s filtering search results, filling out forms, or navigating complex input fields, a smooth and visually appealing experience improves usability. Selectify helps by providing:

• A modern, customizable UI that enhances the look and feel of your forms.
• Improved accessibility, including focus management, keyboard navigation, and screen reader support.
• Consistent experience across themes and sections of your site.
• Performance-conscious implementation—designed for speed and efficiency.

How Selectify Works

Selectify applies beautiful, functional styles to:

• Radio buttons and Checkboxes globally, with a toggle at /admin/config/selectify/settings.
• Select lists in content forms and Views exposed filters, with granular widget control.
• Admin page exclusion to keep your backend clean and familiar.

Feature Breakdown

Radio & Checkbox Enhancements

• Custom-styled with 7 preset accent colors and modern 3D effects.
• Deselectable radios: users can unselect a chosen radio option by clicking it again.
• Admin page exclusion to avoid disrupting backend workflows.
• Built-in CSS variables for easy theming—perfect for frontend developers.

Select List Enhancements

Selectify offers five unique widgets for select lists:

Regular Dropdown

• Standard select list, but visually enhanced.
• Click to select, click again to deselect.

Taggable Dropdown

• Selected items appear as removable tags.
• Users can remove tags directly from the list.

Searchable Dropdown

• Just like the taggable dropdown, but with a built-in search bar for quick filtering.

Checkbox Dropdown

• A dropdown with checkboxes beside each option.
• Multi-select directly from the dropdown—no need for Ctrl or Cmd.

Dual-List Selector

• Options split into “Available” and “Selected” lists.
• Move items between lists for bulk selections.

Additional Select Enhancements

• 7 accent colors for styling flexibility.
• Optional admin exclusion for backend forms.
• Respects field settings (like max selection limits) and enforces them.
• Inline error messages for clearer feedback when users exceed allowed selections.

Configuration & Setup

Radio & Checkbox Elements

1. Go to Admin > Configuration > Selectify Settings (/admin/config/selectify/settings).
2. Enable Custom Radio Buttons and Custom Checkboxes.
3. Optional: exclude these styles from admin pages.

Select Elements

Configure separately for:

Content Editing Forms

1. Visit Manage Form Display (/admin/structure/types/manage/[content-type]/form-display).
2. Choose one of Selectify’s widgets for the field.

Views Exposed Filters

1. Visit Selectify Form Settings (/admin/config/selectify/settings).
2. Apply styles globally, or customize each View individually using the accordion interface.

Admin Page Exclusion

There’s a simple checkbox in Selectify’s settings to exclude all enhancements from admin pages if desired.

Developer-Friendly Features

• Predefined CSS variables for customizing radios, checkboxes, and selects.
• Automatic theme classes: Each widget inherits the active theme name and parent theme name, making custom styling much easier.
• Performance-first—built to minimize page load impact.

Accessibility & ARIA Compliance

Selectify follows modern ARIA best practices to ensure its custom widgets remain fully accessible to screen readers and keyboard users. This includes:

• role="combobox" applied correctly.
• Dynamic aria-expanded and aria-activedescendant management.
• aria-multiselectable set based on field settings.
• Full keyboard support (Arrow keys, Enter, Escape, Space).
• Screen reader-friendly error messaging when limits are exceeded.
• Hidden native <select> remains for form submission compatibility.

Why Choose Selectify?

Selectify is not just a form styling tool—it’s built to solve real-world problems in form usability and accessibility. Whether you’re creating editorial forms, advanced filters, or front-end selections, Selectify makes forms clearer, faster, and easier to use.