This fixes #23426 (closed), but might constitute as a breaking change.
What changes
Validating an input within our .form-check
component is straightforward—it'll handle :valid
and :invalid
with ease. However, styling the label's text based on the input's state is another thing. Let's look at what we have now:
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
With the above HTML, you cannot style Check me out
in CSS based on .form-check-input
's state. To make that happen, we need a sibling element to style, something like:
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
<span class="form-check-description">Check me out</span>
</label>
</div>
That's what this PR changes all our checkboxes and radios to. This matches custom forms more and enables CSS-only validation of checkboxes/radios.
Breaking or non-breaking?
So, why the question of maybe breaks backward compatibility? It's not strictly required. Right now, there's no need to include it for anything but validation. However, it could help improve styling of disabled inputs as well. Here's the current CSS for disabled .form-check
s, which requires a parent class:
With this change, we could do:
.form-check {
position: relative;
display: block;
margin-bottom: $form-check-margin-bottom;
}
.form-check-input:disabled {
+ .form-check-description {
color: $text-muted;
}
}
Thoughts?