4.0 Beta 3 - Custom Checkboxes Are Unclickable Without ID on Input Element

[Joyrex]

In updating my Beta 2 code to Beta 3, one of the breaking changes concerns custom checkboxes.

Consider the following:

<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="chbxTerms" class="custom-control-input" tabindex="5" data-rule-required="true" data-msg-required="You must accept the Terms and Conditions before logging in">
<label class="custom-control-label" for="chbxTerms"> I have read and accept the
<a href="#divTerms" data-toggle="modal" tabindex="6">
Terms and Conditions</a> of use for this site.</label>
</div>
<small class="form-text text-muted">Last accepted: 01/02/18 12:46:44 PM</small>
</div>

Without an ID on the input, the checkbox is unclickable. Adding the ID (and referencing it in the for= attribute on the label restores this functionality. While the example docs do show an ID, this was not required by custom checkboxes in Beta 2 and should be noted.

Also, the documentation still refers to a span tag which is no longer used in custom checkboxes.

See the example Pen: https://codepen.io/Joyrex/pen/qpjvVx

Add id="chbxTerms" to the input element and the checkbox becomes clickable.

Originally discovered in Chrome 64 Windows 10 64-bit, but also in Chrome mobile (iOS) and Safari Mobile (iOS 11.2)

[razh]

The for attribute of label elements is for the id of the labeled control, not the name:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attr-for

It wasn't required in 4.0.0-beta.2 because the <label> element contained the <input> element, which results in an implicit association:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Usage_notes

See this PR, which explains some of the rationale behind this change: #25050

[719media]

If you want the same behavior without having to use id for your inputs, just make the "custom-control" classed element the <label>

e.g., your pen:

https://codepen.io/anon/pen/VyWNoe

[mdo]

Last two comments are correct.

[scotty86]

If you want the same behavior without having to use id for your inputs, just make the "custom-control" classed element the <label>

e.g., your pen:

https://codepen.io/anon/pen/VyWNoe

Thanks! Works with BS 4.3.1.
But there is a little mistake in your example code, the second last </div> must be a </label>.

Another example:

<div class="form-group">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-label">
      fancy label for fancy checkbox
    </span>
  </label>
</div>

Happy coding.