Style guide: checkboxes and radio buttons

Created on 27 February 2017, over 8 years ago
Updated 8 June 2025, 17 days ago

Implement new design for checkbox elements (CSS3, backwards compatible)

Based on the design proposed in the Seven styleguide

Implement new design for radio button elements (CSS3, backwards compatible)

Feature request
Status

Needs work

Version

2.0

Component

Code

Created by

🇨🇦Canada AaronChristian Kelowna, BC

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Needs reroll

    The patch will have to be re-rolled with new suggestions/changes described in the comments in the issue.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇮🇹Italy apaderno Brescia, 🇮🇹
  • 🇮🇹Italy apaderno Brescia, 🇮🇹

    The code in the user.permissions.js file has been changed, and it now removes the form-checkbox CSS class.

    // Create fake checkboxes. We use fake checkboxes instead of reusing
    // the existing checkboxes here because new checkboxes don't alter the
    // submitted form. If we'd automatically check existing checkboxes, the
    // permission table would be polluted with redundant entries. This is
    // deliberate, but desirable when we automatically check them.
    const $fakeCheckbox = $(Drupal.theme('checkbox'))
      .removeClass('form-checkbox')
      .addClass('fake-checkbox js-fake-checkbox')
      .attr({
        disabled: 'disabled',
        checked: 'checked',
        title: Drupal.t(
          'This permission is inherited from the authenticated user role.',
        ),
      });
    const $wrapper = $('<div></div>').append($fakeCheckbox);
    const fakeCheckboxHtml = $wrapper.html();
    

    We should implement code similar to the one used by the Claro theme.

Production build 0.71.5 2024