Pretty Checkbox Radio
Converts standard checkbox and radio button form elements into visually appealing button-style elements that are more user-friendly and touch-friendly.
pcr
Install
composer require 'drupal/pcr:^2.0'
Overview
The Pretty Checkbox Radio module transforms the default HTML checkbox and radio button inputs into styled button elements. This provides a more modern, touch-friendly interface that works well on both desktop and mobile devices.
The module integrates seamlessly with Drupal's Form API and field system, allowing site builders to easily enable pretty buttons on any Boolean, List (text/integer/float), or Entity Reference field through the Manage Form Display interface. It also provides integration with the Better Exposed Filters module, enabling styled filter widgets in Views exposed forms.
The styling features a clean button design with hover effects and clear visual feedback for selected states. Selected elements are highlighted with a distinct blue color, making it easy for users to see their current selections. The module also includes RTL (right-to-left) language support.
Features
- Converts checkboxes and radio buttons into button-styled elements with clean visual design
- Field widget 'Pretty Check boxes/radio buttons' supporting Boolean, List (integer/text/float), and Entity Reference fields
- Better Exposed Filters integration with 'Pretty Checkboxes/Radio Buttons' and 'Pretty Single On/Off Checkbox' widgets
- Hover effects and clear visual feedback for selected states (blue highlighted buttons)
- RTL (right-to-left) language support for internationalization
- Touch-friendly design suitable for mobile devices
- Lightweight implementation with minimal CSS and no JavaScript dependencies
Use Cases
Styling Boolean Fields on Node Forms
When creating content types with Boolean fields (e.g., 'Featured', 'Published to Social Media', 'Send Newsletter'), you can use the Pretty Checkbox Radio widget to make these options more visually prominent and easier to click. Navigate to Structure > Content Types > [Your Type] > Manage Form Display, and select 'Pretty Check boxes/radio buttons' for your Boolean field.
Enhanced List Selection Fields
For List (text) fields with multiple options (e.g., 'Category', 'Priority Level', 'Status'), the pretty widget transforms radio buttons into a row of clickable buttons, making it easier for content editors to see all options at once and make selections quickly.
Better Exposed Filters in Views
When using Views with exposed filters, you can apply the Pretty Checkboxes/Radio Buttons widget to make filter options more user-friendly. In the View's exposed form settings with Better Exposed Filters enabled, select 'Pretty Checkboxes/Radio Buttons' or 'Pretty Single On/Off Checkbox' for the widget type.
Mobile-Friendly Form Design
For sites with significant mobile traffic, the touch-friendly button design of pretty elements is easier to tap accurately than small checkboxes or radio buttons, improving the mobile user experience on forms.
Entity Reference Selection
When using Entity Reference fields with a limited number of options, the pretty widget can display referenced entities as selectable buttons, providing a cleaner interface than traditional checkboxes or select lists.
Tips
- Clear cache after enabling the module or changing widget settings if styled elements don't appear immediately
- The module uses CSS-only styling with no JavaScript dependencies, ensuring fast page loads and compatibility
- Custom themes can override the pretty_elements.css to match your site's design system
- Selected elements use a blue color (#337ab7) by default; override .pretty-element input:checked + label in your theme to customize
- The module supports RTL languages automatically through directional CSS
- For Views, ensure Better Exposed Filters module is properly configured before the Pretty widgets become available
Technical Details
Hooks 4
hook_help
Provides help text for the module on the admin help page, explaining the module's purpose and basic usage instructions.
hook_theme
Registers the custom theme hooks 'elements__pretty_options' and 'form_element__pretty_element' for rendering styled form elements.
hook_theme_suggestions_form_element_alter
Adds 'form_element__pretty_element' theme suggestion when the form element contains pretty element markup.
hook_element_info_alter
Adds PrettyElement::process callback to checkboxes, radios, checkbox, and radio form element types. This allows the module to intercept and transform elements marked with #pretty_option.
Troubleshooting 4
Clear all Drupal caches (drush cr or admin/config/development/performance). If using a CDN or browser caching, also clear those caches.
Ensure the pcr/pretty_elements library is loading correctly. Check browser developer tools for CSS loading errors. Verify no theme CSS is conflicting with .pretty-element styles.
Verify Better Exposed Filters module is installed (version 6.0.3+ or 7.0.0+) and enabled. Ensure your View uses 'BEF' as the exposed form style.
Ensure your site's language direction is properly set. The module uses [dir=rtl] CSS selector which requires the dir attribute on the html element.