How can I add a custom CSS class to checkboxes labels?

Question

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

Answer 1

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