Chip inputs

The chip input is a selectize alternative. Choices are selected from a dropdown menu and appear as chips below the input's text box. Chips do not appear in the order they are selected. Instead chips are shown in the order specified by the choices argument. Use the max argument to limit the number of choices a user may select.

chipInput(
  id,
  choices = NULL,
  values = choices,
  selected = NULL,
  ...,
  placeholder = NULL,
  max = Inf,
  inline = TRUE,
  sort = "stack"
)

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

Arguments

id	A character string specifying the id of the reactive input.
choices	A character vector or list specifying the possible choices.
values	A character vector or list of strings specifying the input's values, defaults to choices.
selected	One or more of values specifying which values are selected by default.
...	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 placeholder text of the chip input, defaults to NULL.
max	A number specifying the maximum number of items a user may select, defaults to Inf.
inline	One of TRUE or FALSE specifying if chips are rendered inline. If TRUE multiple chips may fit onto a single row, otherwise, if FALSE, chips expand to fill the width of their parent element, one chip per row.
sort	One of "stack", "queue", or "fixed" specifying how selected chips are ordered, defaults to "stack". "stack", selected chips are placed ahead of other selected chips. "queue", selected chips are placed behind other selected chips. "fixed", selected chips appear in the order specified by choices and values. Use "fixed" and sort choices to keep selected chips in the same sorted order.
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().

Example simple application

ui <- container(
  chipInput(
    id = "chips",
    choices = paste("Option number", 1:10),
    values = 1:10,
    inline = TRUE
  ) %>%
    width("1/2")
)

server <- function(input, output) {

}

shinyApp(ui, server)

Example inline chips

ui <- container(
  chipInput(
    id = "chips",
    choices = c(
      "A rather long option, isn't it?",
      "Shorter",
      "A middle-size option",
      "One more"
    ),
    values = 1:4,
    fill = FALSE
  ) %>%
    width("1/2") %>%
    background("blue") %>%
    shadow("small")
)

server <- function(input, output) {

}

shinyApp(ui, server)

See also

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

Examples

### Default input

chipInput(
  id = "chip1",
  choices = paste("Choice", 1:5),
  selected = c("Choice 3", "Choice 4")
)
#> <div id="chip1" class="yonder-chip btn-group dropup" data-max="-1" data-sort="stack">
#>   <input class="form-control custom-select" data-toggle="dropdown"/>
#>   <div class="dropdown-menu">
#>     <button class="dropdown-item" value="Choice 1">Choice 1</button>
#>     <button class="dropdown-item" value="Choice 2">Choice 2</button>
#>     <button class="dropdown-item selected" value="Choice 3">Choice 3</button>
#>     <button class="dropdown-item selected" value="Choice 4">Choice 4</button>
#>     <button class="dropdown-item" value="Choice 5">Choice 5</button>
#>   </div>
#>   <div class="chips chips-inline chips-grey">
#>     <button class="chip" value="Choice 1">
#>       <span class="chip-content">Choice 1</span>
#>       <span class="chip-close">&times;</span>
#>     </button>
#>     <button class="chip" value="Choice 2">
#>       <span class="chip-content">Choice 2</span>
#>       <span class="chip-close">&times;</span>
#>     </button>
#>     <button class="chip active" value="Choice 3">
#>       <span class="chip-content">Choice 3</span>
#>       <span class="chip-close">&times;</span>
#>     </button>
#>     <button class="chip active" value="Choice 4">
#>       <span class="chip-content">Choice 4</span>
#>       <span class="chip-close">&times;</span>
#>     </button>
#>     <button class="chip" value="Choice 5">
#>       <span class="chip-content">Choice 5</span>
#>       <span class="chip-close">&times;</span>
#>     </button>
#>   </div>
#> </div>