Single checkbox label has no "for" attribute and input has no id

McGern commented 7 months ago

Thanks, this is great library, but noticed that when a single checkbox is rendered, there is no "for" attribute, meaning that label can't be clicked to toggle the checkbox state. When using "selectboxes" (i.e. multiple checkboxes) it works fine.

Assume latest version, because it's happening in the live form builder demo and the example pages - showing as v5.0.0-rc.27

example 1

Go to the form builder https://formio.github.io/formio.js/app/builder.html
Add a "Checkbox" field and save without making any changes
Go down to the rendered form
Clicking the label doesn't toggle the checkbox

example 2

Go to the kitchen sink demo page https://formio.github.io/formio.js/app/examples/kitchen.html
Scroll down to the checkbox examples towards the bottom of the page, where there is a single checkbox above the multiple checkboxes (with the drink preferences)
Single checkbox label doesn't toggle, but the multi checkbox label does
Viewing the rendered markup, there is no "for" attribute generated for the single checkbox, but there is a "for" and "id" for the multi checkbox

VikkiAlenn commented 4 months ago

Thank you for reporting this issue. I am able to reproduce and have logged a ticket for the backlog (FIO-8199). We are always willing to review any contributions to resolve this issue from the open source community.

demetris-manikas commented 4 months ago

This worked for me.

Templates.current = {
    checkbox: {
        form: (ctx: any) => {
            const inputId = `${ctx.id}-${ctx.key}`
            const input = `
                <input
                ref="input"
                class="form-check-input"
                type="checkbox"
                id="${inputId}"
                >
            `;
            const label = `
                <label class="${ctx.input.labelClass} form-check-label" for="${inputId}">
                    <span>${ctx.component.label}</span>
                </label>
            `;
            return `
            <div class="form-check">
                ${input}
                ${label}
            </div>
            `
        }
    }
};

lane-formio commented 3 months ago

Resolved here: https://github.com/formio/formio.js/pull/5581

demetris-manikas commented 3 months ago

Nice. Any chance of seeing this in 5x.rc version anytime soon?

lane-formio commented 3 months ago

I expect so at least in the next month.

formio / formio.js

Single checkbox label has no "for" attribute and input has no id #5469