Select inputs

Create a select input. Select elements typically appear as a simple menu of choices and may have one selected choice. A group select input is a select input with one or two additional components. These addon components are used to change the reactivity or value of the input, see Details for more information.

selectInput(
  id,
  choices = NULL,
  values = choices,
  selected = values[[1]],
  ...,
  placeholder = NULL
)

updateSelectInput(
  id,
  choices = NULL,
  values = choices,
  selected = choices[[1]],
  enable = NULL,
  disable = NULL,
  valid = NULL,
  invalid = NULL,
  session = getDefaultReactiveDomain()
)

groupSelectInput(
  id,
  choices,
  values = choices,
  selected = values[[1]],
  ...,
  left = NULL,
  right = NULL
)

updateGroupSelectInput(
  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 vector specifying the input's choices.
values	A character vector specifying the values of the input's choices, defaults to choices.
selected	One of values indicating the default value of the input, defaults to values[[1]].
...	Additional named arguments passed as HTML attributes to the parent element or tag elements passed as child elements to the parent element.
placeholder	A character string specifying the placeholder text of the select input, defaults to NULL.
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().
left, right	A character vector specifying static addons or buttonInput() or dropdown() elements specifying dynamic addons. Addons affect the reactive value of the group input, see the Details section below for more information. left is character or right is character If left or right are character vectors, then the group input functions like a text input. The value will update and trigger a reactive event when the text box is modified. The group input's reactive value is the concatenation of the static addons specified by left or right and the value of the text input. left is button or right is button The button does not change the value of the group input. However, the input no longer triggers event when the text box is updated. Instead the value is updated when a button is clicked. Static addons are still applied to the group input value. left is a dropdown or right is a dropdown The value of the group input does chance depending on the clicked dropdown menu item. The value of the input group is the concatenation of the dropdown input value, the value of the text input, and any static addons.

See also

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

Examples

### Simple select input

selectInput(
  id = "select1",
  choices = c(
    "Choice 1",
    "Choice 2",
    "Choice 3"
  ),
  values = list(1, 2, 3)
)
#> <div class="yonder-select" id="select1">
#>   <input type="text" class="form-control custom-select" data-toggle="dropdown" data-boundary="window" placeholder="Choice 1"/>
#>   <div class="dropdown-menu">
#>     <button class="dropdown-item active" value="1">Choice 1</button>
#>     <button class="dropdown-item" value="2">Choice 2</button>
#>     <button class="dropdown-item" value="3">Choice 3</button>
#>   </div>
#>   <div class="valid-feedback"></div>
#>   <div class="invalid-feedback"></div>
#> </div>

### Group select input

groupSelectInput(
  id = "select2",
  choices = 1:5,
  left = "$",
  right = ".00"
) %>%
  width(10)
#> <div class="yonder-group-select input-group w-10" id="select2">
#>   <div class="input-group-prepend">
#>     <span class="input-group-text">$</span>
#>   </div>
#>   <select class="custom-select">
#>     <option selected value="1">1</option>
#>     <option value="2">2</option>
#>     <option value="3">3</option>
#>     <option value="4">4</option>
#>     <option value="5">5</option>
#>   </select>
#>   <div class="input-group-append">
#>     <span class="input-group-text">.00</span>
#>   </div>
#>   <div class="valid-feedback"></div>
#>   <div class="invalid-feedback"></div>
#> </div>