Shiny Components

Inputs, outputs and display messages to make your data interactive on every device. Add these components to Shiny Layouts to give your app a navbar, sidebar, cards and more.

Inputs

Inputs allow users to interact with the webpage by clicking a button, entering text, selecting an option, and more.

The inputs shown here are just a sample of the many inputs available in Shiny. For more, see awesome Shiny extensions.

Outputs

Outputs create a spot on the webpage to display results from the server, such as text, tables, plots, and more.

The outputs shown here are a small sample of Shiny outputs available in R. For more, see htmlwidgets.

DataTable

This
That
And The
Other Thing
Image

Map (leaflet)

Plot (ggplot2)

Plot (plotly)

Table

Table (gt)

Table (reactable)

Text 

#| standalone: true
#| components: [viewer]
library(shiny)
library(bslib)

ui <- page_fluid(
  textInput("x", "", placeholder = "Enter text"),
  textOutput("value"),
    class = "vh-100 d-flex justify-content-center align-items-center px-4"
)

server <- function(input, output) {
  output$value <- renderText({input$x})
}

shinyApp(ui = ui, server = server)
UI 

#| standalone: true
#| components: [viewer]
library(shiny)
library(bslib)

ui <- page_fillable(
  checkboxInput("show_slider", label = "Show slider", value = TRUE),
  uiOutput("slider_ui"), 
  gap = 0
)

server <- function(input, output) {
  output$slider_ui <- renderUI({ 
    if (input$show_slider) { 
      sliderInput("slider", "", 1, 10, 5) 
    } 
  }) 
}

shinyApp(ui = ui, server = server)
Value Box

Verbatim Text 

#| standalone: true
#| components: [viewer]
library(shiny)
library(bslib)

ui <- page_fluid(
  textInput("x", "", placeholder = "Enter text"),
  verbatimTextOutput("value", placeholder = TRUE)
)

server <- function(input, output) {
  output$value <- renderText({input$x})
}

shinyApp(ui = ui, server = server)
No matching items

Display Messages

Provide feedback to your user with notifications, progress bars, and confirmation modals.

The display messages shown here are a small sample of the many display messages available in Shiny.

For more, see awesome Shiny extensions.

Modal 

#| standalone: true
#| components: [viewer]
## file: app.R
library(shiny)
library(bslib)

ui <- page_fixed(
  actionButton("show", "Show modal dialog"),
    class = "vh-100 d-flex justify-content-center align-items-center px-4"
)

server <- function(input, output, session) {

  observe({ 
    showModal( 
      modalDialog( 
        span('This is a somewhat important message.'),
        easy_close = TRUE,
        footer = NULL
      ) 
    ) 
  }) |>
    bindEvent(input$show) 

}

shinyApp(ui, server)
Notifications 

#| standalone: true
#| components: [viewer]
library(shiny)
library(bslib)

ui <- page_fluid(
  actionButton("show", "Show Notification"),
  class = "vh-100 d-flex justify-content-center align-items-center px-4"
)

server <- function(input, output, session) {
  # A queue of notification IDs
  ids <- character(0)
  # A counter
  n <- 0

  
  observe({
    # Save the ID for removal later
    id <- showNotification(paste("Message", n), duration = NULL)
    ids <<- c(ids, id)
    n <<- n + 1
  }) |>
      bindEvent(input$show)
}

shinyApp(ui, server)
Popovers

Progress Bar 

#| standalone: true
#| components: [viewer]
library(shiny)
library(bslib)

ui <- page_fillable(
  actionButton("run", "Compute"),
  textOutput("txt"),
  class = "vh-100 d-flex justify-content-center align-items-center px-4"
)

server <- function(input, output, session) {
  text <- reactiveVal()
  output$txt <- renderText({ text() })

  observe({
    withProgress(
      message = 'Calculation in progress',
      detail = 'This may take a while...',
      value = 0,
      {
        for (i in 1:15) {
          incProgress(1/15)
          Sys.sleep(0.25)
        }
        text("Done computing!")
      }
    )
  }) |>
    bindEvent(input$run)
}

shinyApp(ui, server)
Tooltips

No matching items