This lesson will show you how to add control widgets to your Shiny apps. What’s a widget? A web element that your users can interact with. Widgets provide a way for your users to send messages to the Shiny app.
Shiny widgets collect a value from your user. When a user changes the widget, the value will change as well. This sets up opportunities that we’ll explore in Lesson 4.
Shiny comes with a family of pre-built widgets, each created with a transparently named R function. For example, Shiny provides a function named
actionButton that creates an Action Button and a function named
sliderInput that creates a slider bar.
The standard Shiny widgets are:
||A group of check boxes|
||A single check box|
||A calendar to aid date selection|
||A pair of calendars for selecting a date range|
||A file upload control wizard|
||Help text that can be added to an input form|
||A field to enter numbers|
||A set of radio buttons|
||A box with choices to select from|
||A slider bar|
||A submit button|
||A field to enter text|
Some of these widgets are built using the Twitter Bootstrap project, a popular open source framework for building user-interfaces.
You can add widgets to your web page in the same way that you added other types of HTML content in Lesson 2. To add a widget to your app, place a widget function in
mainPanel in your
Each widget function requires several arguments. The first two arguments for each widget are
A Name for the widget. The user will not see this name, but you can use it to access the widget’s value. The name should be a character string.
A label. This label will appear with the widget in your app. It should be a character string, but it can be an empty string
In this example, the name is “action” and the label is “Action”:
actionButton("action", label = "Action")
The remaining arguments vary from widget to widget, depending on what the widget needs to do its job. They include things the widget needs to do its job, like initial values, ranges, and increments. You can find the exact arguments needed by a widget on the widget function’s help page, (e.g.,
ui.R script below makes the app pictured above. Change your own
ui.R script to match it, and then launch the app (
runApp("App-1"), select Run App, or use shortcuts).
Play with each widget to get a feel for what it does. Experiment with changing the values of the widget functions and observe the effects. If you are interested in the layout scheme for this Shiny app, read the description in the application layout guide. This lesson will not cover this slightly more complicated layout scheme, but it is interesting to note what it does.
# ui.R shinyUI(fluidPage( titlePanel("Basic widgets"), fluidRow( column(3, h3("Buttons"), actionButton("action", label = "Action"), br(), br(), submitButton("Submit")), column(3, h3("Single checkbox"), checkboxInput("checkbox", label = "Choice A", value = TRUE)), column(3, checkboxGroupInput("checkGroup", label = h3("Checkbox group"), choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3), selected = 1)), column(3, dateInput("date", label = h3("Date input"), value = "2014-01-01")) ), fluidRow( column(3, dateRangeInput("dates", label = h3("Date range"))), column(3, fileInput("file", label = h3("File input"))), column(3, h3("Help text"), helpText("Note: help text isn't a true widget,", "but it provides an easy way to add text to", "accompany other widgets.")), column(3, numericInput("num", label = h3("Numeric input"), value = 1)) ), fluidRow( column(3, radioButtons("radio", label = h3("Radio buttons"), choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),selected = 1)), column(3, selectInput("select", label = h3("Select box"), choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3), selected = 1)), column(3, sliderInput("slider1", label = h3("Sliders"), min = 0, max = 100, value = 50), sliderInput("slider2", "", min = 0, max = 100, value = c(25, 75)) ), column(3, textInput("text", label = h3("Text input"), value = "Enter text...")) ) ))
ui.R script to create the user-interface displayed below. Notice that this Shiny app uses a basic Shiny layout (no columns) and contains three of the widgets pictured above. The other values of the select box are shown below the image of the app.
In particular, make sure that your select box widget is named “var”, and your slider widget is named “range”.
Also notice that the slider widget has two values, not one.
# ui.R shinyUI(fluidPage( titlePanel("censusVis"), sidebarLayout( sidebarPanel( helpText("Create demographic maps with information from the 2010 US Census."), selectInput("var", label = "Choose a variable to display", choices = list("Percent White", "Percent Black", "Percent Hispanic", "Percent Asian"), selected = "Percent White"), sliderInput("range", label = "Range of interest:", min = 0, max = 100, value = c(0, 100)) ), mainPanel() ) ))
It is easy to add fully functional widgets to your Shiny app.
Shiny provides a family of functions to create these widgets.
Each function requires a name and a label.
Some widgets need specific instructions to do their jobs.
You add widgets to your Shiny app just like you added other types of HTML content (see Lesson 2)
The Shiny Widgets Gallery provides templates that you can use to quickly add widgets to your Shiny apps.
To use a template, visit the gallery. The gallery displays each of Shiny’s widgets, and demonstrates how the widgets’ values change in response to your input.
Select the widget that you want and click the “See Code” button below the widget. The gallery will take you to an example app that describes the widget. To use the widget, copy and paste the code in the example’s
ui.R file to your
In Lesson 4, you will learn how to connect widgets to reactive output, objects that update themselves whenever your user changes a widget.
We love it when R users help each other, but RStudio does not monitor or answer the comments in this thread. If you'd like to get specific help, we recommend the Shiny Discussion Forum for in depth discussion of Shiny related questions and How to get help for a list of the best ways to get help with R code.comments powered by Disqus