List group inputs

List group inputs are an actionable list of items. They behave similarly to checkboxes or radios, that is, users may select one or more items from the list. However, list group items may include highly variable content.

listGroupInput(
  id,
  choices = NULL,
  values = choices,
  selected = NULL,
  ...,
  layout = "vertical",
  flush = FALSE
)

updateListGroupInput(
  id,
  choices = NULL,
  values = choices,
  selected = NULL,
  enable = NULL,
  disable = NULL,
  session = getDefaultReactiveDomain()
)

Arguments

id	A character string specifying the id of the reactive input.
choices	A vector of character strings or list of tag elements specifying the content of the list group's items.
values	A character vector specifying the values of the list items, defaults to choices.
selected	One or more of values specifying which choices are selected by default, defaults to NULL, in which case no choice is selected.
...	Additional named arguments passed as HTML attributes to the parent element or tag elements passed as child elements to the parent element.
layout	A responsive argument. One of "vertical" or "horizontal" specifying how list items are laid out, defaults to "vertical". Note, if layout is "horizontal" and the flush argument is ignored.
flush	One of TRUE or FALSE specifying if the list group is rendered without an outside border, defaults to FALSE. Removing the list group border is useful when rendering a list group inside a custom parent container, e.g. inside a card().
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.
session	A reactive context, defaults to getDefaultReactiveDomain().

Navigation with a list group

A list group can also control a set of panes. Be sure to set multiple = FALSE. This layout is reminiscent of a table of contents.

ui <- container(
  columns(
    column(
      width = 3,
      listGroupInput(
        id = "nav",
        selected = "pane1",
        choices = c(
          "Item 1",
          "Item 2",
          "Item 3"
        ),
        values = c(
          "pane1",
          "pane2",
          "pane3"
        )
      )
    ),
    column(
      navContent(
        navPane(
          id = "pane1",
          p("Pellentesque tristique imperdiet tortor.")
        ),
        navPane(
          id = "pane2",
          p("Sed bibendum. Donec pretium posuere tellus.")
        ),
        navPane(
          id = "pane3",
          p("Pellentesque tristique imperdiet tortor.")
        )
      )
    )
  )
)

server <- function(input, output) {
  observeEvent(input$nav, {
    showPane(input$nav)
  })
}

shinyApp(ui, server)

See also

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

Examples

### An actionable list group

listGroupInput(
  id = "list1",
  choices = paste("Item", 1:5)
)
#> <div class="yonder-list-group list-group" id="list1">
#>   <button class="list-group-item list-group-item-action" value="Item 1">Item 1</button>
#>   <button class="list-group-item list-group-item-action" value="Item 2">Item 2</button>
#>   <button class="list-group-item list-group-item-action" value="Item 3">Item 3</button>
#>   <button class="list-group-item list-group-item-action" value="Item 4">Item 4</button>
#>   <button class="list-group-item list-group-item-action" value="Item 5">Item 5</button>
#> </div>

### List group within a card

card(
  header = h6("Pick an item"),
  listGroupInput(
    id = "list2",
    flush = TRUE,
    choices = paste("Item", 1:5),
  )
)
#> <div class="card">
#>   <div class="card-header">
#>     <h6>Pick an item</h6>
#>   </div>
#>   <div class="yonder-list-group list-group list-group-flush" id="list2">
#>     <button class="list-group-item list-group-item-action" value="Item 1">Item 1</button>
#>     <button class="list-group-item list-group-item-action" value="Item 2">Item 2</button>
#>     <button class="list-group-item list-group-item-action" value="Item 3">Item 3</button>
#>     <button class="list-group-item list-group-item-action" value="Item 4">Item 4</button>
#>     <button class="list-group-item list-group-item-action" value="Item 5">Item 5</button>
#>   </div>
#> </div>

### Horizontal list group

listGroupInput(
  id = "list3",
  choices = paste("Item", 1:4),
  layout = "horizontal"
)
#> <div class="yonder-list-group list-group list-group-horizontal" id="list3">
#>   <button class="list-group-item list-group-item-action" value="Item 1">Item 1</button>
#>   <button class="list-group-item list-group-item-action" value="Item 2">Item 2</button>
#>   <button class="list-group-item list-group-item-action" value="Item 3">Item 3</button>
#>   <button class="list-group-item list-group-item-action" value="Item 4">Item 4</button>
#> </div>