Selectify

Selectify replaces select lists, radios and checkboxes with styled, accessible widgets in Views, Field UI, Form API and Webform forms. It is for Drupal site builders and themers.

Selectify gives you five dropdown styles and styled radios and checkboxes. You set them up on one settings page, with no custom code.

Start here

• Explore the Selectify live demo
• After installing, open "Selectify Settings" at /admin/config/selectify/settings

Features

• Five dropdown styles: In Manage Form Display the widgets are "Selectify Dropdown", "Selectify Dropdown Taggable", "Selectify Dropdown With Search", "Selectify Dropdown With Checkbox" and "Selectify Dual List". They work on list (text), list (integer), list (float) and entity reference fields, including fields that allow multiple values.
• Radio Button Styling and Checkbox Styling: Turn on custom styles for each type. Radios can be a "Toggle Switch" or a checkbox with an X or a checkmark. Checkboxes can be a toggle or a checkbox with a checkmark. Choose a Circle or Square shape and a Small, Medium or Large size.
• Frontend Color Theme and Admin Color Theme: Set the front end and the administration pages separately. "Color mode" is None, Light or Dark. "Accent color" is Blue, Coral, Gold, Indigo, Neutral, Slate or Teal. "None - Use default browser colors" leaves the colors to the browser.
• Views Select Filters: Apply one widget to every exposed select filter on the site ("Site-wide widget style"), turn Selectify off for all Views filters, or set a widget for each view.
• Form API Select Elements: Optional. Enable "Enable Selectify for Form API selects" to style selects built with the Form API. The settings page lists the forms Selectify has found, accepts "CSS selector rules", and shows a built-in list of forms that are always left alone.
• Pages: "Disable Selectify on admin routes" and "Additional pages to disable Selectify" turn Selectify off on chosen pages. Enter one path per line; * works as a wildcard.
• Theme and language support: The settings page includes a live preview. Styles are included for Claro, Gin and Olivero. Layouts work in left-to-right and right-to-left languages. The scripts do not use jQuery.
• Checkbox dropdown chip: a "+N" chip names the first two choices and counts the rest. Hover lists them, and screen readers hear "and N more".
• Accessibility modes: the widgets and toggles support forced-colors and reduced-motion settings.
• Theme color variables: styles read the current region color variables (--r-background, --r-text and others) first and the older 1.x short names second.
• Updates and uninstall: update hooks 10001 to 10005 migrate stored settings, so run drush updb after updating. The newest sets the admin accent color to neutral and the mode to light when they are missing. Uninstalling removes all Selectify configuration and state.
• Help page: the module help page shows its README.
• For developers: Three alter hooks, hook_selectify_widget_alter, hook_selectify_element_alter and hook_selectify_is_applicable_alter, are described in selectify.api.php. Add data-selectify-skip to a checkbox or radio element's attributes to leave it unstyled.

Submodules

• Selectify Webform: Adds "Webform Select Elements" to the settings page, with "Disable Selectify for all Webforms", "Apply Selectify to all Webform submissions site-wide", "Site-wide Webform widget" and "Per-Webform configuration". It handles select-based Webform elements such as Select Other, Entity Select, Term Select, Likert, Mapping and Table Select. It needs Selectify and Webform. It is part of the Selectify download and is not a separate Composer package.

Installation: get started in 3 steps

1. Install the module with Composer:
   

   composer require drupal/selectify

2. Enable it on the Extend page, or with Drush. To style Webform selects, also enable Selectify Webform:
   

   drush en selectify

3. Open "Selectify Settings" under Configuration → System, turn on the radio and checkbox styles you want, and pick a widget for your Views filters. For field widgets, open Manage Form Display on the content type and choose a "Selectify" widget for a list or entity reference field.

The settings page needs the permission "Administer Selectify settings".

Requirements

• Drupal 10, 11 or 12
• PHP 8.1 or later
• Drupal core Views and Field modules
• Webform, only for the Selectify Webform submodule

Selectify does not depend on a particular theme.

Developed and maintained by Alaa Haddad of Flash Web Center, LLC.

AI disclosure: AI tools assisted with drafting and reviewing this project description. The maintainer verified the final content against the project source.