Theming webform element label template for entity checkboxes field

Question

In the webform, I use the Entity checkboxes component, which allows me to display the options I need using Views, depending on the node to which the webform is linked. But I lack flexibility in terms of setting up the output theme of these fields. In debugging mode, I saw that the markup I needed was inserted in the template "form_element_label.html.twig". How do I override this template for a webform with a specific name and only for a specific field?

I asked this question to ChatGPT, but her solution doesn't work. However, the general logic is correct. Create a new function in theme's .theme file:

function MYTHEME_theme_suggestions_webform_element_label_alter(array &$suggestions, array $variables) {
  $element = $variables['element'];
  if (isset($element['#webform_id']) && isset($element['#key'])) {
    $suggestions[] = 'webform_element_label__' . $element['#webform_id'] . '__' . $element['#key'];
  }
}

Create a new template file in theme's templates folder: webform-element-label--WEBFORMID--ELEMENTKEY.html.twig

Drupal doesn't see this pattern. Where do I make a mistake?

I see the finished result like this: for the form I need, I redefine the label template of the field I need, in which I insert the HTML markup I need. Overriding the views template does not allow me to do this, but I was able to display the viewing mode of the type of material I needed. Now the only thing I need is to hide it in the accordion element so that I get information when I click on the link.

Answer 1

You should set twig.config: debug: true in your services.yml which will allow you to see the current suggestions.

You should see your suggestions, however with Drupal even if you do and you passed the suggestion with a '-' not '_', it'll tell you it's there but it won't actually pick up the template.

So make sure you convert the - to _.

$suggestion = 'webform_element_label__' . $element['#webform_id'] . '__' . $element['#key'];
$suggestion = str_replace('-', '_', $suggestion);
$suggestions[] = $suggestion;

With twig debug on, it'll actually tell you the theme hook you need.

e.g. <!-- THEME HOOK: 'breadcrumb' -->

function mytheme_theme_suggestions_breadcrumb_alter(array &$suggestions, array $variables) {

Answer 2

My mistake was that I inattentively studied the features of the work of this component of forms. It is impossible to insert your markup there, because it is filtered. My approach with the output of the teaser material is correct. You just need to take into account that links and other html tags will be deleted there, respectively, you can forget about the pop-up window.