Checkbox and switch inputs

Reactive checkbox and checkbar inputs. Users may select one or more choices. The checkbox input appears as a standard checkbox or set of checkboxes. When a checkbox input has no selected choices the reactive value is NULL. Switch inputs differ from checkboxes only in appearance.

checkboxInput(
  id,
  choices = NULL,
  values = choices,
  selected = NULL,
  ...,
  inline = FALSE
)

updateCheckboxInput(
  id,
  choices = NULL,
  values = choices,
  selected = NULL,
  inline = FALSE,
  enable = NULL,
  disable = NULL,
  valid = NULL,
  invalid = NULL,
  session = getDefaultReactiveDomain()
)

switchInput(id, choices, values = choices, selected = NULL, ...)

updateSwitchInput(
  id,
  choices = NULL,
  values = choices,
  selected = NULL,
  enable = NULL,
  disable = NULL,
  valid = NULL,
  invalid = NULL,
  session = getDefaultReactiveDomain()
)

Arguments

id	A character string specifying the id of the reactive input.
choices	A character string or vector specifying a label or labels for the checkbox or checkbar.
values	A character string or vector specifying values for the checkbox or checkbar input, defaults to choice or values, respectively.
selected	One or more of values specifying which choices are selected by default, defaults to NULL, in which case no choices are initially selected.
...	Additional named arguments passed as HTML attributes to the parent element or tag elements passed as child elements to the parent element.
inline	One of TRUE or FALSE specifying if the checkbox input choices render inline or stacked, defaults to FALSE, in which case the choices are stacked.
enable	One of values specifying particular choices to enable or TRUE specifying the entire input is enabled, defaults to NULL.
disable	One of values specifying particular choices to disable or TRUE specifying the entire input is disabled, defaults to NULL.
valid	A character string specifying a message to the user indicating how the input's value is valid, defaults to NULL.
invalid	A character string specifying a message to the user indicating how the input's value is invalid, defaults to NULL.
session	A reactive context, defaults to getDefaultReactiveDomain().

See also

Other inputs: buttonGroupInput(), buttonInput(), checkbarInput(), chipInput(), fileInput(), formInput(), listGroupInput(), menuInput(), navInput(), radioInput(), radiobarInput(), rangeInput(), selectInput(), textInput()

Examples

### One option

checkboxInput(
  id = "checkbox1",
  choices = "Choice 1",
  selected = "Choice 1"
)
#> <div class="yonder-checkbox" id="checkbox1">
#>   <div class="custom-control custom-checkbox">
#>     <input class="custom-control-input" type="checkbox" id="checkbox-879-559" name="checkbox-879-559" value="Choice 1" checked autocomplete="off"/>
#>     <label class="custom-control-label" for="checkbox-879-559">Choice 1</label>
#>     <div class="valid-feedback"></div>
#>     <div class="invalid-feedback"></div>
#>   </div>
#> </div>

### Multiple options

checkboxInput(
  id = "checkbox2",
  choices = c("Choice 1", "Choice 2")
)
#> <div class="yonder-checkbox" id="checkbox2">
#>   <div class="custom-control custom-checkbox">
#>     <input class="custom-control-input" type="checkbox" id="checkbox-927-452" name="checkbox-927-452" value="Choice 1" autocomplete="off"/>
#>     <label class="custom-control-label" for="checkbox-927-452">Choice 1</label>
#>   </div>
#>   <div class="custom-control custom-checkbox">
#>     <input class="custom-control-input" type="checkbox" id="checkbox-998-201" name="checkbox-998-201" value="Choice 2" autocomplete="off"/>
#>     <label class="custom-control-label" for="checkbox-998-201">Choice 2</label>
#>     <div class="valid-feedback"></div>
#>     <div class="invalid-feedback"></div>
#>   </div>
#> </div>

### Inline checkbox

checkboxInput(
  id = "checkbox3",
  choices = c("Choice 1", "Choice 2", "Choice 3"),
  inline = TRUE
)
#> <div class="yonder-checkbox" id="checkbox3">
#>   <div class="custom-control custom-checkbox custom-control-inline">
#>     <input class="custom-control-input" type="checkbox" id="checkbox-197-517" name="checkbox-197-517" value="Choice 1" autocomplete="off"/>
#>     <label class="custom-control-label" for="checkbox-197-517">Choice 1</label>
#>   </div>
#>   <div class="custom-control custom-checkbox custom-control-inline">
#>     <input class="custom-control-input" type="checkbox" id="checkbox-767-536" name="checkbox-767-536" value="Choice 2" autocomplete="off"/>
#>     <label class="custom-control-label" for="checkbox-767-536">Choice 2</label>
#>   </div>
#>   <div class="custom-control custom-checkbox custom-control-inline">
#>     <input class="custom-control-input" type="checkbox" id="checkbox-847-77" name="checkbox-847-77" value="Choice 3" autocomplete="off"/>
#>     <label class="custom-control-label" for="checkbox-847-77">Choice 3</label>
#>     <div class="valid-feedback"></div>
#>     <div class="invalid-feedback"></div>
#>   </div>
#> </div>

### Switches

switchInput(
  id = "switch1",
  choices = paste("Switch choice", 1:3),
  selected = "Switch choice 3"
) %>%
  active("indigo")
#> <div class="yonder-checkbox active-indigo" id="switch1">
#>   <div class="custom-control custom-switch">
#>     <input class="custom-control-input" type="checkbox" id="checkbox-898-446" name="checkbox-898-446" value="Switch choice 1" autocomplete="off"/>
#>     <label class="custom-control-label" for="checkbox-898-446">Switch choice 1</label>
#>   </div>
#>   <div class="custom-control custom-switch">
#>     <input class="custom-control-input" type="checkbox" id="checkbox-567-427" name="checkbox-567-427" value="Switch choice 2" autocomplete="off"/>
#>     <label class="custom-control-label" for="checkbox-567-427">Switch choice 2</label>
#>   </div>
#>   <div class="custom-control custom-switch">
#>     <input class="custom-control-input" type="checkbox" id="checkbox-62-555" name="checkbox-62-555" value="Switch choice 3" checked autocomplete="off"/>
#>     <label class="custom-control-label" for="checkbox-62-555">Switch choice 3</label>
#>     <div class="valid-feedback"></div>
#>     <div class="invalid-feedback"></div>
#>   </div>
#> </div>