Add `input_checkbox()` and `input_radio()`
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 569
- Forks
- 72
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 5
Description
As investigated in #712, adding input_checkbox() and input_radio() in bslib would allow us to revisit the markup choices for checkbox and radio groups.
Where shiny::checkboxInput() currently uses markup like this (and radioButtons() is similar)
<div id="checkbox2" class="form-group shiny-input-checkboxgroup shiny-input-container shiny-bound-input" role="group" aria-labelledby="checkbox2-label">
<label class="control-label" id="checkbox2-label" for="checkbox2">Check this out</label>
<div class="shiny-options-group">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox2" value="aenean">
<span>aenean</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox2" value="magna nullam sem">
<span>magna nullam sem</span>
</label>
</div>
</div>
</div>
in Bootstrap 5 (at least), the preferred markup is closer to the following where the primary difference is using <fieldset><legend></legend><!-- radio groups --></fieldset> (note: the following example is for styling purpose and doesn't include all required id/aria attributes)
<fieldset>
<legend class="col-form-label">Check this out</legend>
<div class="shiny-option-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="checkbox2" value="aenean">
<span>aenean</span>
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="checkbox2" value="magna nullam sem">
<span>magna nullam sem</span>
</label>
</div>
</div>
</fieldset>
The biggest advantage of using the above markup is that inline radio and check groups are super easy and do everything you'd expect (wrapping inputs, indented wrapped lines in labels, etc.):
.shiny-input-container-inline .shiny-option-group {
display: flex;
gap: 1rem;
flex-wrap: wrap;
flex-direction: row;
}
Originally posted by @gadenbuie in https://github.com/rstudio/bslib/issues/712#issuecomment-1654470808
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The entry points are the proposed input_checkbox() and input_radio() functions, with shiny::checkboxInput() and radioButtons() as current markup references. Start by tracing those existing Shiny inputs and the Bootstrap 5 fieldset/legend and form-check pattern. Done means both helpers produce the required accessible checkbox and radio group markup, including the described inline behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- bootstrap, r, scss
- Domain
- accessibility, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100