rstudio / rstudio/bslib

Add `input_checkbox()` and `input_radio()`

Open
#717 0 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.