Add link to a checkbox field's label

Support Plugins
1

Hello,

I’m trying to do exactly the same as this post:

But without success.

I’m having this twig in ckeckbox filed:

    {% extends "forms/field.html.twig" %}
 
 {% block label %}
 {% endblock %}
 
 {% block input %}
     {% set id = field.id|default(field.name) ~ '-' ~ key %}
     <div class="{{ form_field_wrapper_classes ?: 'form-input-wrapper' }} {{ field.size }} {{ field.wrapper_classes }}">
         <input
             {# required attribute structures #}
             name="{{ (scope ~ field.name)|fieldName }}"
             value="{{ value|join(', ') }}"
             type="checkbox"
             {% if value == true %} checked="checked" {% endif %}
 
             {# input attribute structures #}
             {% block input_attributes %}
                 id="{{ id|e }}"
                 {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
                 {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
                 {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
                 {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
                 {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
                 {% if required %}required="required"{% endif %}
             {% endblock %}
             />
         <label style="display:inline;" class="inline" for="{{ id|e }}">
             {% if field.markdown %}
                 {{ field.label|t|markdown(false) }}
             {% else %}
                 {{ field.label|t|e }}
             {% endif %}
             {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
         </label>
     </div>
 {% endblock %}

And I 've this form:

         placeholder: 'Escriu el teu missatge'
            type: textarea
             validate:
                 required: true
         -
             name: priv
             label: 'Accepta la <a target="_blank" href="avis-de-privacitat">política de privacitat</a>?'
             type: checkbox
             validate:
                 required: true

And the form shows all as string.
I’ve tried to change the twig without the |e but not working the html. And I’m aware of this post trying to do it in a markdown way:

What I must do?

2
3

Sorry for my ignorance. What do you mean with “There is an escaping…”? Ar you saying this line?

 <label style="display:inline;" class="inline" for="{{ id|e }}">
            {% if field.markdown %}
                {{ field.label|t|markdown(false) }}
            {% else %}
 ->               {{ field.label|t|e }}<--
            {% endif %}
            {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
        </label>
4

Exactly this. :wink:

This filters HTML from the string.

5

Then I need to do something after changing to {{ field.label|t } ?

Because I don’t see any change and the a tag is showing as string like before.

6

oh, now is working using |raw not |e

Thanks!!!

7

In your form you can set
markdown: true
Then links are working:

8

Sorry to be THAT guy. I don’t think it’s a great idea to put links in labels, because it’s outside the spec and you don’t know what browsers will do with it. When looking up a reference, I noticed there are also valid accessibility concerns:

Accessibility concerns

Interactive content

Don’t place interactive elements such as anchors or buttons inside of a label. Doing so will make it difficult for people to activate the form input associated with the label.

Just saying!

I can see what you are trying to achieve. An alternative might be to use the form field’s help property, though that may also be stripped of markup. In a site I made some time ago, I think I added a custom field property called hint which I made a custom template to handle, and that allowed markup. I may have done that because I didn’t know about help at the time I built it.

Cheers