Outlined checks without IDs

[mladenb]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

Hi,

This is neither the bug nor the feature request. The closest I could classify this is the improvement request. In short, when using Outlined checks all the examples show that the input element has an id attribute, which label element references in its for attribute. This seems like a waste of time since we need to provide unique values for all those ids on the page, which can quickly get troublesome when adding elements in a loop, for example, when displaying search results or so. We usually need to come up with some unique patterns for those ids making sure those won't repeat on the same page.

A simple html alternative is not to use id/for pair, but to simply put the input element inside the label element. Given that the input element is hidden anyway, it won't affect the content displayed within the label element.

In short, is it too much of a work to change the id/for pair approach with nested input inside the label element?

More info on implicit labels: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#defining_an_implicit_label Example: <label>Click me <input type="text" /></label>

Thanks.

Reduced test cases

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label>

could become

<label class="btn btn-outline-primary">
    <input type="checkbox" class="btn-check" autocomplete="off">Single toggle
</label>

What operating system(s) are you seeing the problem on?

Windows, Linux

What browser(s) are you seeing the problem on?

Chrome, Firefox, Microsoft Edge

What version of Bootstrap are you using?

5.3

[patrickhlauke]

this was not possible until the arrival of the :has() selector (as you'd need to style the parent label element based on the state of the child input.

something for version 6 perhaps

[Colt89cc]

Zip file link removed by maintainer

[julien-deramond]

Uploading bugreport-aruba_reteu-RONS31.267-94-14-2024-09-02-19-33-02.zip…

Please don't upload zip files. For security reasons, I'll edit your message to drop it. Feel free to link to repositories, CodePens, StackBlitzes (etc.) instead.

[Colt89cc]

Duplicate of #

[Dmitri-Sintsov]

Are multiple labels for the same input possible with implicit labels? Some forms may require multiple labels and / or custom layout.