Drupal Theme: How do you apply a form element label only to specific element types?

So, since my last blog post, my obsession has switched gears a bit from GPS to creating a new Drupal theme. Part of this is due to working with the USWDS Theme and the fact that a new version 2 will be coming out soon. (Beta 5 as of today) If you're not familiar with this theme, you can find a little information on their website: https://designsystem.digital.gov/about/history/ Basically, the goal of this frontend framework is to establish a more common look for Federal Government websites.

As for Drupal, this framework is applied through a Drupal 8 Theme also called USWDS. This Drupal theme itself is setup to provide services for the 1st version of USWDS and not version 2. Of course, there is an effort currently under way to provide compatibility for version 2. While we all started initially looking at making the Drupal theme compatible, I realized how much I didn't really care for the current path and how it runs off of Classy as the base. With that, I set out to the goal of creating my own "base" Drupal Theme. The goal of my theme is to use Stark, provide some important items for Drupal compatibility, but leave more to the custom theme and front-end developer with their own subtheme. Also, add all the USWDS abilities to the Drupal theme.

**Not to mention, using Stark instead of Classy may make for a faster site with less fights against the Classy theme.

What does this have to do with form element labels? Well, this was one of my many struggles during the process. Not to mention, my struggles with learning more about twig and theming Drupal 8 in general. The specific issue with Form Element Labels had to do with adding a special class to only checkbox and radio labels. Who knows, perhaps the all knowing internet will come down on me to say it's easy to do that without using preprocess hooks. But for me, I found the path forward through preprocess.

Adding special classes to checkbox and radio form element labels 

I'll try to keep this simple and not so text heavy. So, let's say you would like to use is_checkbox and is_radio as twig variables. How can you not only make this available in your form-element-label.html.twig file? You'll need two hooks.

First, lets add a #element_type to our label, through hook_preprocess_form_element.

/**
 * Implements hook_preprocess_form_element().
 */
function mythemename_preprocess_form_element(&$variables) {
  // Add an element type for the label
  $type = $variables['element']['#type'];
  $variables['label']['#element_type'] = $type;
}

Next, we'll add our is_checkbox and is_radio variables for form-element-label.html.twig to use.

/**
 * Implements hook_preprocess_form_element_label().
 */
function mythemename_preprocess_form_element_label(&$variables) {
  if (!empty($variables['element']['#element_type']) && $variables['element']['#element_type'] == 'checkbox') {
    $variables['is_checkbox'] = true;
  }
  else {
    $variables['is_checkbox'] = false;
  }

  if (!empty($variables['element']['#element_type']) && $variables['element']['#element_type'] == 'radio') {
    $variables['is_radio'] = true;
  }
  else {
    $variables['is_radio'] = false;
  }

}

That's it! is_checkbox and is_radio should now be available to use in form-element-label.html.twig. From there, you can apply accordingly.

{%-
  set classes = [
  is_checkbox ? 'checkbox-label' ,
  is_radio ? 'radio-label' ,
]
-%}