Normalize Custom Checkbox and Radio with Form Check

[pat270]

What do you think about normalizing the markup in custom checkboxes and radios to match form-check (#23444) ? Something like:

<div class="custom-radio">
    <label class="custom-control">
        <input class="custom-control-input" type="radio">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description"></span>
    </label>
</div>

have it stacked by default and have helper classes to inline them? I think it makes sense to keep the pattern consistent for both. It would also prevent label.custom-control from expanding the full width of the container with .custom-controls-stacked (https://getbootstrap.com/docs/4.0/components/forms/#stacked).

[mdo]

Ugh, yeah, I think making them more consistent would be good. I completely flaked on doing that before the beta because I never kept an issue open for it. I wouldn't mind seeing a quick PR to see what'd break compatibility-wise if we went forward with it.

[ssimo3lsuhsc]

I am noticing that the presence or absence of any span elements as direct children of the .form-check-label causes a change in the padding or margin of the entire .form-check-label. In my case, the span element holds conditional text; it has neither class nor style attributes. Why would the presence or absence of a child span element affect the properties of the parent?

<div id="forms" role="group" tabindex="-1" class=""><div class="form-check"><label class="form-check-label"><input type="checkbox" name="forms" true-value="Family Registration Form (attach child photo)" autocomplete="off" class="form-check-input" value="Family Registration Form (attach child photo)" id="__BVID__2_"> Family Registration Form (attach child photo)<!----></label></div><div class="form-check"><label class="form-check-label"><input type="checkbox" name="forms" true-value="Enrollment Agreement" autocomplete="off" class="form-check-input" value="Enrollment Agreement" id="__BVID__3_"> Enrollment Agreement<!----></label></div><div class="form-check"><label class="form-check-label"><input type="checkbox" name="forms" true-value="Emergency Plan" autocomplete="off" class="form-check-input" value="Emergency Plan" id="__BVID__4_"> Emergency Plan<!----></label></div><div class="form-check"><label class="form-check-label"><input type="checkbox" name="forms" true-value="Medication Administration Policy" autocomplete="off" class="form-check-input" value="Medication Administration Policy" id="__BVID__5_"> Medication Administration Policy<!----></label></div><div class="form-check"><label class="form-check-label"><input type="checkbox" name="forms" true-value="Consent to Photograph" autocomplete="off" class="form-check-input" value="Consent to Photograph" id="__BVID__6_"> Consent to Photograph<!----></label></div><div class="form-check"><label class="form-check-label"><input type="checkbox" name="forms" true-value="Parental Authorization for Medication" autocomplete="off" class="form-check-input" value="Parental Authorization for Medication" id="__BVID__7_"> Parental Authorization for Medication<span> (Optional)</span></label></div><div class="form-check"><label class="form-check-label"><input type="checkbox" name="forms" true-value="Permission to Apply Topical Ointments, Sunscreen" autocomplete="off" class="form-check-input" value="Permission to Apply Topical Ointments, Sunscreen" id="__BVID__8_"> Permission to Apply Topical Ointments, Sunscreen<span> (Optional)</span></label></div><div class="form-check"><label class="form-check-label"><input type="checkbox" name="forms" true-value="Permission for Water Play" autocomplete="off" class="form-check-input" value="Permission for Water Play" id="__BVID__9_"> Permission for Water Play<span> (Optional)</span></label></div></div>