No option to change the label-attribute from checkboxes and radios-fields

[Megafry]

There is no way to add a class to the label wrapping the checkbox, can this be added?

"@checkboxes, @radios" : {
    attributes: {
        input: {
            "+class": "field__input--check"
        },
    },
}

code

PS: the generated HTML is not w3c valid:
Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.

<div class="field-group">
   <label class="label" for="form-x-form-input-discount"> Discount</label>
   <label>
   <input class="field--check" name="discount[]" type="checkbox" id="form-x-form-input-discount-0" value="Half-fare travelcard">Half-fare travelcard</label>
   <label>
   <input class="field--check" name="discount[]" type="checkbox" id="form-x-form-input-discount-2" value="none">none</label>
</div>

Better approach:

<fieldset class="field-group">
   <legend class="label"> Discount</legend>
   <label>
   <input class="field--check" name="discount[]" type="checkbox" id="form-x-form-input-discount-0" value="Half-fare travelcard">Half-fare travelcard</label>
   <label>
   <input class="field--check" name="discount[]" type="checkbox" id="form-x-form-input-discount-2" value="none">none</label>
</fieldset>

Environment

• Freeform Pro 5.8.6
• Craft 4.13.9

[kjmartens]

Hi @Megafry,

Thank you for your feedback.

There is the option to apply stuff to the label, but as you probably already know, that just applies to the main label and not the option labels. Unfortunately, there currently isn't a way to supply attributes for the option labels. However, I will note this feature request and we'll look at adding support for it in the near future. 🙂

As for the better accessible approaches, it's on our list to move in this direction or at least build one sample template that is fully accessible out of the box. The trouble with making that change now is that anyone using these sample templates may have CSS that expects the current approach and changing it will break it for them.

In the meantime, you can approach both of the issues you mention with an approach that some of our sample formatting templates take:
https://docs.solspace.com/craft/freeform/v5/templates/formatting/tailwind-3/

{% do field.setParameters({
    attributes: {
        container: {
            class: [
                field.oneLine ? "input-group-one-line"
            ]
        }
    }
}) %}

{{ field.renderContainerOpeningTag }}

    {{ field.renderLabel }}
    {{ field.renderInstructions }}
    {% for index, option in field.options %}
        <div class="flex items-center mb-1">
            <input type="checkbox"
                    name="{{ field.handle }}[]"
                    value="{{ option.value }}"
                    id="{{ field.idAttribute }}-{{ index }}"
                    class="{{ field.attributes.input.get("class") }}{{ field.hasErrors ? ' border-red-500' }}"
                    {{ option.value in field.value ? "checked" }}
            />
            <label for="{{ field.idAttribute }}-{{ index }}" class="ml-2 font-normal text-slate-600">
                {{ option.label|t('freeform')|raw }}
            </label>
        </div>
    {% endfor %}
    {{ field.renderErrors }}

{{ field.renderContainerClosingTag }}

[Megafry]

Thank you for your feedback.

I understand that this change is breaking.

Formie has elegantly solved this problem by having a config array.
Therefore you don't need to copy any templates.

Can you extend the form.renderTag to have identical options?

Formie config array:

'radioButtons' => [
    'fieldContainer' => [
        'tag' => 'fieldset',
    ],
    'fieldLabel' => [
        'tag' => 'legend',
        'attributes' => [
            'class' => 'label--legend',
        ],
    ],
    'fieldInput' => [
        'attributes' => [
            'class' => [
                'input',
                'input--radio',
            ]
        ],
    ],
    'fieldOptionLabel' => [
        'attributes' => [
            'class' => [
                'label',
                'label--option'
            ]
        ],
    ],
]

[kjmartens]

Thanks for sharing that @Megafry. We will check into it and see what we can do. 🙂