Building UI Components in Shiny

Shiny provides a rich set of UI components that let you create interactive web applications with R. In this tutorial, you’ll learn how to use text inputs, sliders, dropdowns, buttons, and layout functions to build professional-looking Shiny apps.

Text and Numeric Inputs

The most common input widgets let users enter text or numbers.

library(shiny)

ui <- fluidPage(
  textInput("name", "Enter your name:"),
  numericInput("age", "Enter your age:", value = 25, min = 0, max = 150)
)

server <- function(input, output) {}

shinyApp(ui, server)

The textInput() function creates a text field where users can type strings. The numericInput() function restricts input to numbers and lets you set minimum and maximum values.

Sliders

Sliders are perfect for selecting values within a range.

ui <- fluidPage(
  sliderInput("confidence", "Confidence Level:",
              min = 0, max = 100, value = 95),
  sliderInput("range", "Select Range:",
              min = -100, max = 100, value = c(-50, 50))
)

server <- function(input, output) {}

shinyApp(ui, server)

You can create single-value sliders or range sliders by providing a two-element vector for the default value.

Dropdowns and Selection Inputs

Use selectInput() for dropdown menus and radioButtons() for visible option lists.

ui <- fluidPage(
  selectInput("country", "Select Country:",
              choices = c("USA", "UK", "Canada", "Australia")),
  radioButtons("color", "Favorite Color:",
               choices = c("Red", "Green", "Blue"))
)

server <- function(input, output) {}

shinyApp(ui, server)

The selectInput() function creates a dropdown, while radioButtons() displays all options at once.

Checkboxes

Checkbox inputs let users select multiple options or toggle a single boolean.

ui <- fluidPage(
  checkboxInput("subscribe", "Subscribe to newsletter", value = FALSE),
  checkboxGroupInput("features", "Select Features:",
                    choices = c("Charts", "Tables", "Maps"))
)

server <- function(input, output) {}

shinyApp(ui, server)

Use checkboxInput() for a single toggle and checkboxGroupInput() for multiple selections.

Action Buttons

Action buttons trigger specific events in your app.

ui <- fluidPage(
  actionButton("clickme", "Click Me!"),
  actionLink("gotolink", "Go to Documentation")
)

server <- function(input, output) {
  observeEvent(input$clickme, {
    message("Button was clicked!")
  })
}

shinyApp(ui, server)

The observeEvent() function listens for button clicks and executes code in response.

Date and File Inputs

Shiny supports date selection and file uploads.

ui <- fluidPage(
  dateInput("startdate", "Start Date:"),
  dateRangeInput("daterange", "Date Range:"),
  fileInput("upload", "Upload File:", accept = c(".csv", ".xlsx"))
)

server <- function(input, output) {}

shinyApp(ui, server)

Use dateInput() for single dates, dateRangeInput() for ranges, and fileInput() for file uploads.

Layout Functions

Organize your UI with layout functions.

ui <- fluidPage(
  titlePanel("My Shiny App"),
  
  fluidRow(
    column(4, 
           textInput("name", "Name:")),
    column(4,
           numericInput("age", "Age:", 25)),
    column(4,
           actionButton("submit", "Submit"))
  ),
  
  fluidRow(
    column(12,
           plotOutput("myplot"))
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

The fluidPage() function creates a responsive page layout. Use fluidRow() to create rows and column() to specify width (1-12).

Putting It All Together

Here’s a complete example combining several UI components:

library(shiny)

ui <- fluidPage(
  titlePanel("Data Entry Form"),
  
  fluidRow(
    column(6,
           textInput("username", "Username:"),
           passwordInput("password", "Password:")),
    column(6,
           selectInput("role", "Role:",
                      choices = c("Admin", "User", "Guest")))
  ),
  
  fluidRow(
    column(12,
           sliderInput("priority", "Priority:",
                      min = 1, max = 10, value = 5))
  ),
  
  fluidRow(
    column(12,
           actionButton("submit", "Submit", class = "btn-primary"),
           actionButton("reset", "Reset", class = "btn-secondary"))
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

Summary

Shiny’s UI components make it easy to build interactive web applications with R. Key takeaways:

• Text inputs: textInput(), passwordInput() for text entry
• Numeric inputs: numericInput() for number entry with validation
• Sliders: sliderInput() for selecting values in a range
• Selection inputs: selectInput(), radioButtons(), checkboxGroupInput()
• Buttons: actionButton(), actionLink() for triggering events
• Special inputs: dateInput(), dateRangeInput(), fileInput()
• Layout: fluidPage(), fluidRow(), column() for organizing components

In the next tutorial, we’ll cover deploying your Shiny app to the web so others can use it.