Render HTML in Label?

[pixeljitsu]

Trying to pull this off but it does not render the color chip next to the color name... Any ideas?

{% for color in siteSettings.colors %}
{% set label = color.colorName ~ '&nbsp;&nbsp; <span style="background-color:"' ~ color.color ~';">&nbsp;&nbsp;</span>' %}
    { "value":"{{ color.color }}" , "label":"{{ label }}" }
    {% if not loop.last %},{% endif %}
{% endfor %}

[lewisjenkins]

Looks like you have an extra " in there. Try this:

{% for color in siteSettings.colors %}
{% set label = color.colorName ~ '&nbsp;&nbsp; <span style="background-color:' ~ color.color ~';">&nbsp;&nbsp;</span>' %}
    { "value":"{{ color.color }}" , "label":"{{ label }}" }
    {% if not loop.last %},{% endif %}
{% endfor %}

[pixeljitsu]

Thanks Lewis, unfortunately the entities are encoded and not rendered.

<option value="#0080ff">Light Blue&amp;amp;nbsp;&amp;amp;nbsp;&amp;lt;span style=&amp;quot;background-color:#0080ff;&amp;quot;&amp;gt;&amp;amp;nbsp;&amp;amp;nbsp;&amp;lt;/span&amp;gt;</option>

also, using {{ label | raw }} throws a for each error.

[pixeljitsu]

If I hack /craft/app/templates/_includes/forms/select.html line 30 from <option value="{{ optionValue }}"{% if optionValue == value %} selected{% endif %}{% if optionDisabled %} disabled{% endif %}>{{ optionLabel }}</option> to <option value="{{ optionValue }}"{% if optionValue == value %} selected{% endif %}{% if optionDisabled %} disabled{% endif %}>{{ optionLabel | raw }}</option>

It renders the entities but does not render the html:

[lewisjenkins]

Are spans allowed in option tags? I wouldn't have thought that was valid html. Even if you get it working, it might not display as expected in every browser. I'm away from my laptop so can't check at the moment, but will have a look in a bit.

[martinherweg]

{% set predefinedColors = [
{
    "name": "Rot",
    'value': 'h-colors--red'
},
{
    'name': 'Orange',
    'value': 'h-colors--orange'
},
{
    'name': 'Grün',
    'value': 'h-colors--green'
},
{
    'name': 'Blau',
    'value': 'h-colors--blue'
},
{
    'name': 'Lila',
    'value': 'h-colors--purple'
},
{
    'name': 'Dunkel Grau',
    'value': 'h-colors--darkGray'
},
{
    'name': 'Grau',
    'value': 'h-colors--gray'
},
{
    'name': 'Medium Grau',
    'value': 'h-colors--mediumGray'
},
{
    'name': 'Hell Grau',
    'value': 'h-colors--lightGray'
},
] %}

{% for color in predefinedColors %}
    {"value": "{{ color.value }}", "label": "<span class='color__chooser {{ color.value }}'></span>"}
    {% if not loop.last %},{% endif %}
{% endfor %}

I use this with Radio Buttons and style it with the Control Panel CSS Plugin so it results in this ->

maybe this is an option for you?

[lewisjenkins]

Dynamic Fields for Craft 3 is now available, so closing this issue.