Add control widgets
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 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.,
app.R script below makes the app pictured above. Change your own
App-1/app.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 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.
Be sure your
ui is identical to the one displayed below before you move on. You will use the script in Lesson 4 and Lesson 5, as part of an app that visualizes census data.
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.
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
app.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.
If you have questions about this article or would like to discuss ideas presented here, please post on RStudio Community. Our developers monitor these forums and answer questions periodically. See help for more help with all things Shiny.