Skip to content

Commit

Permalink
Update checks and radios in input groups
Browse files Browse the repository at this point in the history
- Adds .mt-0 to the examples
- Zero-ing out universally for all of them like in #32896 would cause issues for those who include the input with visible label text, where the text and input would be misaligned
  • Loading branch information
mdo committed Jan 27, 2021
1 parent 0fa16a5 commit 1486c35
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions site/content/docs/5.0/forms/input-group.md
Expand Up @@ -81,19 +81,19 @@ Add the relative form sizing classes to the `.input-group` itself and contents w

## Checkboxes and radios

Place any checkbox or radio option within an input group's addon instead of text.
Place any checkbox or radio option within an input group's addon instead of text. We recommend adding `.mt-0` to the `.form-check-input` when there's no visible text next to the input.

{{< example >}}
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
<input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
<div class="input-group-text">
<input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input">
<input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
Expand Down

0 comments on commit 1486c35

Please sign in to comment.