diff options
author | Neeraj Kumar Das <nkdas91@gmail.com> | 2022-06-30 22:58:28 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-06-30 22:58:28 +0300 |
commit | f2692b1c5827c612fc5a1b7d03e11fbb692e7e1f (patch) | |
tree | 2fc571593568689691ae84480a7c1923e6419ee1 | |
parent | 505e0235b91052e7b9e4e542d8cd5639cba03de6 (diff) |
Added examples for Radios in List Group (#36644)
* Add examples for Radios in List Group
* Reduce the number of checkboxes and radios to 3 for consistency
Drop aria-label on inputs and use label
Use class stretched-link on labels to cover the whole list group item
Check the first radio by default
Remove radios from streched link examples
Co-authored-by: Julien Déramond <juderamond@gmail.com>
-rw-r--r-- | site/content/docs/5.2/components/list-group.md | 67 |
1 files changed, 34 insertions, 33 deletions
diff --git a/site/content/docs/5.2/components/list-group.md b/site/content/docs/5.2/components/list-group.md index 5c78ddfe50..563d5b5276 100644 --- a/site/content/docs/5.2/components/list-group.md +++ b/site/content/docs/5.2/components/list-group.md @@ -247,53 +247,54 @@ Place Bootstrap's checkboxes and radios within list group items and customize as {{< example >}} <ul class="list-group"> <li class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - First checkbox + <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox"> + <label class="form-check-label" for="firstCheckbox">First checkbox</label> </li> <li class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - Second checkbox + <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox"> + <label class="form-check-label" for="secondCheckbox">Second checkbox</label> </li> <li class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - Third checkbox + <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox"> + <label class="form-check-label" for="thirdCheckbox">Third checkbox</label> </li> +</ul> +{{< /example >}} + +{{< example >}} +<ul class="list-group"> <li class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - Fourth checkbox + <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked> + <label class="form-check-label" for="firstRadio">First radio</label> </li> <li class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - Fifth checkbox + <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio"> + <label class="form-check-label" for="secondRadio">Second radio</label> + </li> + <li class="list-group-item"> + <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio"> + <label class="form-check-label" for="thirdRadio">Third radio</label> </li> </ul> {{< /example >}} -And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too. +You can use `.stretched-link` on `<label>`s to make the whole list group item clickable. {{< example >}} -<div class="list-group"> - <label class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value=""> - First checkbox - </label> - <label class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value=""> - Second checkbox - </label> - <label class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value=""> - Third checkbox - </label> - <label class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value=""> - Fourth checkbox - </label> - <label class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value=""> - Fifth checkbox - </label> -</div> +<ul class="list-group"> + <li class="list-group-item"> + <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched"> + <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label> + </li> + <li class="list-group-item"> + <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched"> + <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label> + </li> + <li class="list-group-item"> + <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched"> + <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label> + </li> +</ul> {{< /example >}} ## CSS |