Score:-4

How do I render a radio inside a label?

km flag

The drulma theme has a form-element--type--radio.html.twig template file that is rendering the radio input and then the label.

<div class="control js-form-item form-item js-form-type-radio form-item-age-bracket js-form-item-age-bracket">
  <input data-drupal-selector="edit-age-bracket-12-25" class="visually-hidden 
    form-radio is-link radio" type="radio" id="edit-age-bracket-12-25"
    name="age_bracket" value="12-25">
   <label class="webform-options-display-buttons-label radio option">
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'input__radio' -->
    <!-- FILE NAME SUGGESTIONS:
    x input--radio.html.twig
    x input--radio.html.twig
    * input.html.twig
    -->
    <!-- BEGIN OUTPUT from 'themes/contrib/drulma/templates/form/input--radio.html.twig' -->
     <!-- END OUTPUT from 'themes/contrib/drulma/templates/form/input--radio.html.twig' -->
12-25
  </label>
</div>

The template has 'children' enclosed within in the label

 <label{{ label_attributes }}>
  {{ children }}
  {{ label['#title'] }}
 </label>

How do I get the template to really print the radio enclosed in the label.

I have used 'buttons with flex' in webform as the display option for this widget. It looks nice, but does not work for me.

ru flag
Per HTML-spec only phrasing content is allowed inside labels, which means no `<div>`s inside a `<label>`. And *Buttons with flex* sound's like a button inside a div container with flex-style. This is a browser/HTML limitation, and has nothing to do with Drupal.
leymannx avatar
ne flag
Sounds to me like this should be done with JS. Like clicking the label triggers the radio. And with CSS you position it to look like they want.
Interlated avatar
km flag
Same problem as this https://www.drupal.org/project/bootstrap_barrio/issues/3034621. I think the 'correct' fix though is to add a 'for' attribute. Radios rendered as buttons don't work in webform, at least with the drulma theme.
Interlated avatar
km flag
Patch to add 'for' https://www.drupal.org/project/drupal/issues/3218877 this didn't work on d9 for me (and I can't see in the code where it adds 'for')
Interlated avatar
km flag
I did the obvious - change to olivero theme. Can confirm that 'for' is added here and the radio buttons are clickable. Drulma theme bug.
Interlated avatar
km flag
Added an attribute to the label https://www.drupal.org/project/drulma/issues/3346849
Score:0
ua flag

While it is possible to include an <input> tag inside a <label> tag, it's not recommended because it can lead to unexpected behavior.

According to the HTML specification, the contents of a <label> tag should be a "textual label" that describes the purpose of the form control it's associated with. In other words, the label should be a description of the input field, not the field itself.

That being said, if you do include an <input> tag inside a <label> tag, the behavior can vary depending on the browser and the specific attributes used. Some browsers may display the input field as part of the label, while others may ignore the input tag entirely.

In most cases, it's better to use the for attribute to link the label to the corresponding radio input field using the id attribute, as this ensures proper behavior across different browsers and accessibility tools.

ru flag
Actually an input inside the label should be valid, as long as the label's `for`-attribute and the ID of the input don't contradict each other. The problem usually are block level elements (like `div`), which implicitly close the surrounding label tag. So when one codes `<label>label text <div>div text</div></label>`, some browsers might do this `<label>label text </label><div>div text</div>`
Interlated avatar
km flag
There are 2 points here. 1. Twig does not seem to be able to render radio inside labels 2. The webform widget 'radio displayed as flex' does not handle the click event as the label is positioned over the top of the radio element.
I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.