4

I'm using Drupal 8 with the Form API and the AJAX API, now I want to add a custom CSS class to every checkbox label, because I need to use the bootstrap custom checkboxes.

PHP (slimmed):

$form['colors'] = array(
    '#type' => 'checkboxes',
    '#options' => array('1' => $this->t('Black'), '2' => $this->t('White')),
    '#attributes' => [
        'class' => ['custom-control-input'],
    ],
    '#prefix' => '<div class="foobar">',
    '#suffix' => '</div>'
);

HTML Result (please notice every label has the class "option"):

<div class="custom-control custom-checkbox">
  <div class="foobar">
    <div id="edit-colors" class="form-checkboxes">
      <div class="js-form-item form-item js-form-type-checkbox form-item-colors-1 js-form-item-colors-1">
        <input
          class="custom-control-input form-checkbox"
          data-drupal-selector="edit-colors-1"
          data-msg-required="Black is required."
          type="checkbox"
          id="edit-colors-1"
          name="colors[1]"
          value="1"
        />
        <label for="edit-colors-1" class="option">Black</label>
      </div>
      <div class="js-form-item form-item js-form-type-checkbox form-item-colors-2 js-form-item-colors-2">
        <input
          class="custom-control-input form-checkbox"
          data-drupal-selector="edit-colors-2"
          data-msg-required="White is required."
          type="checkbox"
          id="edit-colors-2"
          name="colors[2]"
          value="2"
        />
        <label for="edit-colors-2" class="option">White</label>
      </div>
    </div>
  </div>
</div>

My Twig Code:

<div class="custom-control custom-checkbox">
 {{form.colors}}
</div>

I know about the "template_preprocess_form_element" function, but I had no luck.

Do you guys have any ideas or tipps? Is there a simple way to modify the label class, or should I try the "Form Options Attributes" Plugin?

Thanks

0

1 Answer 1

5

According to issue #2774255 and line 38 in the FormElementLabelTest.php you should be able to use #label_attributes for this.

'#label_attributes' => ['class' => ['meow']],

Update: Seems you can also try to do this by implementing template_preprocess_form_element. There's an example on line 493 in the form.inc. In your theme implement template_preprocess_form_element and hopefully you find some unique identifiers in there to have this class added only for elements in certain forms or elements of certain types. And then it's

$variables['label']['#attributes'] => ['class' => ['meow']]

Last but not least there's the new Formdazzle! module you could try to use to override the label element templates directly.

Drupal form theming with less pain

Theming Drupal forms can be difficult and time-consuming. This module provides a set of utilities that make form theming easier.

Currently, this module provides theme suggestions for forms that are much more useful than those provided by Drupal core.

  • Theme suggestions for all form elements (including buttons)
  • Theme suggestions for all form element labels
  • All theme suggestions include the form ID and the form element name; e.g. [element-type]--[form-id]--[form-element-name].html.twig
3
  • 1
    It's working, but only for form type "textfield". If I add this option "#label_attributes" to a textfield, the label class gets overwritten with "meow", as expected. If I try this with checkboxes. Nothing happens.
    – ciruz
    Oct 18, 2019 at 9:33
  • 2
    Thank you for the tipp! We got it! function template_preprocess_form_element(&$variables) { if ($variables['element']['#type'] == 'checkbox') { $variables['label']['#attributes'] = ['class' => ['custom-control-label']]; } }
    – ciruz
    Oct 18, 2019 at 9:57
  • label_attributes on checkboxes worked fine for me. Sep 15, 2022 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.