rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Added examples for Radios in List Group (#36644)

Browse Source 
* 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>
This commit is contained in:
Neeraj Kumar Das 2022-07-01 01:28:28 +05:30 committed by GitHub
parent 505e0235b9
commit f2692b1c58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
site/content/docs/5.2/components/list-group.md
View File

@ -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
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</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="checkbox" value="" id="thirdCheckbox">
<label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
</li>
</ul>
{{< /example >}}
And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.
{{< example >}}
<ul class="list-group">
<li class="list-group-item">
<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="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 >}}
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