Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Outlined checks without IDs #40832

Open
3 tasks done
mladenb opened this issue Sep 13, 2024 · 4 comments
Open
3 tasks done

Outlined checks without IDs #40832

mladenb opened this issue Sep 13, 2024 · 4 comments

Comments

@mladenb
Copy link

mladenb commented Sep 13, 2024

Prerequisites

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
Copy link
Member

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

This comment was marked as resolved.

@julien-deramond

This comment was marked as resolved.

@Colt89cc

This comment was marked as off-topic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Inbox
Development

No branches or pull requests

4 participants