| Title: | Custom Gov Style Inputs for Shiny |
|---|---|
| Description: | Collection of 'shiny' application styling that are based on the GOV.UK Design System. See <https://design-system.service.gov.uk/components/> for details. |
| Authors: | Ross Wyatt [aut], Cam Race [aut, cre], Sarah Wong [aut], Richard Bielby [ctb], Charlotte Foster [ctb], Jeni Martin [ctb], Andrew Baker [ctb] |
| Maintainer: | Cam Race <[email protected]> |
| License: | GPL (>= 3) |
| Version: | 0.2.0.9000 |
| Built: | 2026-06-04 11:13:52 UTC |
| Source: | https://github.com/dfe-analytical-services/shinygovstyle |
This function inserts a accordion
accordion(inputId, titles, descriptions)accordion(inputId, titles, descriptions)
inputId |
Input Id for the accordion |
titles |
Add the titles for the accordion |
descriptions |
Add the main text for the accordion |
an accordion HTML shiny tag object
Other Govstyle tables tabs and accordions:
govReactable(),
govReactable-shiny,
govTable(),
govTabs()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png", logo_alt_text = "Ministry of Justice logo" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout( size = "two-thirds", accordion( "acc1", c( "Writing well for the web", "Writing well for specialists", "Know your audience", "How people read" ), c( "This is the content for Writing well for the web.", "This is the content for Writing well for specialists.", "This is the content for Know your audience.", "This is the content for How people read." ) ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shiny::shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png", logo_alt_text = "Ministry of Justice logo" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout( size = "two-thirds", accordion( "acc1", c( "Writing well for the web", "Writing well for specialists", "Know your audience", "How people read" ), c( "This is the content for Writing well for the web.", "This is the content for Writing well for specialists.", "This is the content for Know your audience.", "This is the content for How people read." ) ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shiny::shinyApp(ui = ui, server = server)
This function adds a back link to the page
backlink_Input(inputId, label = "Back")backlink_Input(inputId, label = "Back")
inputId |
The input slot that will be used to access the value |
label |
The link text for the backlink, default is "Back" |
a backlink HTML shiny tag object
Other Govstyle navigation:
contents_link(),
service_navigation(),
update_service_navigation()
ui <- shiny::fluidPage( header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shiny::navlistPanel( "", id = "nav", widths = c(2, 10), well = FALSE, # Create first panel shiny::tabPanel( "Select Types", value = "panel1", gov_layout( size = "two-thirds", backlink_Input("link1"), shiny::tags$br(), shiny::tags$br() ) ), shiny::tabPanel( "Tab2", value = "panel2" ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Slightly confused in that it goes forward rather than back # but shows how to use observeEvent(input$link1, { updateTabsetPanel(session, "nav", selected = "panel2") }) } if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shiny::navlistPanel( "", id = "nav", widths = c(2, 10), well = FALSE, # Create first panel shiny::tabPanel( "Select Types", value = "panel1", gov_layout( size = "two-thirds", backlink_Input("link1"), shiny::tags$br(), shiny::tags$br() ) ), shiny::tabPanel( "Tab2", value = "panel2" ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Slightly confused in that it goes forward rather than back # but shows how to use observeEvent(input$link1, { updateTabsetPanel(session, "nav", selected = "panel2") }) } if (interactive()) shinyApp(ui = ui, server = server)
A single column data frame, listing out known examples of bad link text that
check for in the external_link() function.
bad_link_textbad_link_text
bad_link_textA data frame with 53 rows and 1 columns:
Lower cased examples of non-descriptive link text
We've started curating this list so we can create automated checks to help all link text to be as descriptive as possible in line with WCAG 2.2 success criteria 2.4.4: Link Purpose (In Context).
Curated by [email protected]
This function create a detail component that you can click for further details.
banner(inputId, type, label)banner(inputId, type, label)
inputId |
The input slot that will be used to access the value |
type |
Main type of label e.g. alpha or beta. Can be any word |
label |
Text to display. Accepts a plain character string, or |
a banner HTML shiny tag object
Other Govstyle page structure:
cookieBanner(),
footer(),
gov_layout(),
header(),
layouts,
skip_to_main()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "Beta", 'This is a new service' ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "Beta", 'This is a new service' ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
This function create a gov style button
button_Input(inputId, label, type = "default")button_Input(inputId, label, type = "default")
inputId |
The input slot that will be used to access the value |
label |
Display label for the control, or |
type |
The type of button. Options are default, start, secondary and warning. Defaults to "default" |
a HTML button shiny tag object
Other Govstyle select inputs:
checkbox_Input(),
file_Input(),
radio_button_Input(),
select_Input()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::button_Input( inputId = "btn1", label = "Continue", type = "default" ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::button_Input( inputId = "btn1", label = "Continue", type = "default" ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
Simple example dataset containing case management data, used to demonstrate tabs in the example app.
case_datacase_data
A data frame with 12 rows and 4 variables:
The tab the data belongs to
The name of the case manager
Number of open cases
Number of closed cases
Random data generated for the shinyGovstyle package
This function inserts a checkbox group
checkbox_Input( inputId, cb_labels, checkboxIds, label, hint_label = NULL, small = FALSE, error = FALSE, error_message = NULL )checkbox_Input( inputId, cb_labels, checkboxIds, label, hint_label = NULL, small = FALSE, error = FALSE, error_message = NULL )
inputId |
Input Id for the group of checkboxes |
cb_labels |
Add the names of the options that will appear |
checkboxIds |
Add the values for each checkbox |
label |
Insert the text for the checkbox group |
hint_label |
Insert optional hint/secondary text. Defaults to NULL |
small |
change the sizing to a small version of the checkbox. Defaults
to |
error |
Whenever you want to include error handle on the component |
error_message |
If you want a default error message |
a checkbox HTML shiny tag object
Other Govstyle select inputs:
button_Input(),
file_Input(),
radio_button_Input(),
select_Input()
ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png"), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service'), shinyGovstyle::gov_layout(size = "two-thirds", # Simple checkbox shinyGovstyle::checkbox_Input( inputId = "check1", cb_labels = c("Option 1", "Option 2", "Option 3"), checkboxIds = c("op1", "op2", "op3"), label = "Choice option" ), # Error checkbox shinyGovstyle::checkbox_Input( inputId = "check2", cb_labels = c("Option 1", "Option 2", "Option 3"), checkboxIds = c("op1", "op2", "op3"), label = "Choice option", hint_label = "Select the best fit", error = TRUE, error_message = "Select one" ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of eventId2 observeEvent(input$submit, { if (is.null(input$check2)){ shinyGovstyle::error_on(inputId = "check2") } else { shinyGovstyle::error_off(inputId = "check2") } }) } if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png"), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service'), shinyGovstyle::gov_layout(size = "two-thirds", # Simple checkbox shinyGovstyle::checkbox_Input( inputId = "check1", cb_labels = c("Option 1", "Option 2", "Option 3"), checkboxIds = c("op1", "op2", "op3"), label = "Choice option" ), # Error checkbox shinyGovstyle::checkbox_Input( inputId = "check2", cb_labels = c("Option 1", "Option 2", "Option 3"), checkboxIds = c("op1", "op2", "op3"), label = "Choice option", hint_label = "Select the best fit", error = TRUE, error_message = "Select one" ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of eventId2 observeEvent(input$submit, { if (is.null(input$check2)){ shinyGovstyle::error_on(inputId = "check2") } else { shinyGovstyle::error_off(inputId = "check2") } }) } if (interactive()) shinyApp(ui = ui, server = server)
contents_link(link_text, input_id, subcontents_text_list, subcontents_id_list)contents_link(link_text, input_id, subcontents_text_list, subcontents_id_list)
link_text |
vector of link text for contents |
input_id |
contents button Id |
subcontents_text_list |
vector of link text for subcontents |
subcontents_id_list |
vector of link Ids for subcontents. If missing
automatically matches to Id in |
This function creates an action link to nav between tabs and optionally link to subcontents headers.
an action button HTML shiny tag object
Other Govstyle navigation:
backlink_Input(),
service_navigation(),
update_service_navigation()
ui <- shiny::fluidPage( gov_row( # Nav columns shiny::column( width = 3, id = "nav", # DO NOT REMOVE ID # Contents box shiny::tags$div( id = "govuk-contents-box", # DO NOT REMOVE ID class = "govuk-contents-box", # DO NOT REMOVE CLASS shiny::tags$h2("Contents"), # Text types tab contents_link( "Text Types", "text_types_button", subcontents_text_list = c( "date_Input", "text_Input", "text_area_Input", "button_Input" ), subcontents_id_list = c(NA, NA, NA, "button_input_text_types") ), # Tables tabs and accordions tab contents_link( "Tables, tabs and accordions", "tables_tabs_and_accordions_button", subcontents_text_list = c( "govTable", "govTabs", "accordions", "button_Input" ), subcontents_id_list = c( NA, NA, NA, "button_input_tables_tabs_accordions" ) ), contents_link( "Cookies", "cookies_button" ), ) ), shiny::column( width = 9, id = "main_col", # DO NOT REMOVE ID # Set up a nav panel so everything not on single page shiny::tabsetPanel( type = "hidden", id = "tab-container", # DO NOT REMOVE ID shiny::tabPanel( "Text Types", value = "text_types", gov_layout( size = "two-thirds", backlink_Input("back1"), heading_text("Page 2", size = "l"), label_hint( "label2", paste( "These are some examples of the", "types of user text inputs that you can use" ) ), heading_text("date_Input", size = "s"), date_Input( inputId = "date1", label = "What is your date of birth?", hint_label = "For example, 31 3 1980" ), heading_text("text_Input", size = "s"), text_Input( inputId = "txt1", label = "Event name" ), heading_text("text_area_Input", size = "s"), text_area_Input( inputId = "text_area1", label = "Can you provide more detail?", hint_label = paste( "Do not include personal or financial", "information, like your National Insurance", "number or credit card details." ) ), text_area_Input( inputId = "text_area2", label = "How are you today?", hint_label = "Leave blank to trigger error", error = TRUE, error_message = "Please do not leave blank", word_limit = 300 ), heading_text( "button_Input", size = "s", id = "button_input_text_types" ), button_Input("btn2", "Go to next page"), button_Input( "btn3", "Check for errors", type = "warning" ) ) ), shiny::tabPanel( "Tables, tabs and accordions", value = "tables_tabs_and_accordions", gov_layout( size = "two-thirds", backlink_Input("back2"), heading_text("Page 3", size = "l"), label_hint( "label3", paste( "These are some examples of using tabs", "type tables" ) ), heading_text("govTable", size = "s"), heading_text("govTabs", size = "s"), heading_text("accordions", size = "s"), shinyGovstyle::accordion( "acc1", c( "Writing well for the web", "Writing well for specialists", "Know your audience", "How people read" ), c( paste( "This is the content for Writing well", "for the web." ), paste( "This is the content for Writing well", "for specialists." ), paste( "This is the content for", "Know your audience." ), "This is the content for How people read." ) ), heading_text( "button_Input", size = "s", id = "button_input_tables_tabs_accordions" ), button_Input("btn4", "Go to next page"), ) ), #################### Create cookie panel ######### shiny::tabPanel( "Cookies", value = "panel-cookies", gov_layout( size = "two-thirds", heading_text("Cookie page", size = "l"), label_hint( "label-cookies", "This an example cookie page" ) ) ) ) ) ), # end of main_col footer(TRUE) ) # end of gov_row server <- function(input, output, session) { # Tab nav shiny::observeEvent(input$back2, { shiny::updateTabsetPanel( session, "tab-container", selected = "text_types" ) }) shiny::observeEvent(input$tables_tabs_and_accordions_button, { shiny::updateTabsetPanel( session, "tab-container", selected = "tables_tabs_and_accordions" ) }) shiny::observeEvent(input$cookies_button, { shiny::updateTabsetPanel( session, "tab-container", selected = "panel-cookies" ) }) } # end of server if (interactive()) shiny::shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( gov_row( # Nav columns shiny::column( width = 3, id = "nav", # DO NOT REMOVE ID # Contents box shiny::tags$div( id = "govuk-contents-box", # DO NOT REMOVE ID class = "govuk-contents-box", # DO NOT REMOVE CLASS shiny::tags$h2("Contents"), # Text types tab contents_link( "Text Types", "text_types_button", subcontents_text_list = c( "date_Input", "text_Input", "text_area_Input", "button_Input" ), subcontents_id_list = c(NA, NA, NA, "button_input_text_types") ), # Tables tabs and accordions tab contents_link( "Tables, tabs and accordions", "tables_tabs_and_accordions_button", subcontents_text_list = c( "govTable", "govTabs", "accordions", "button_Input" ), subcontents_id_list = c( NA, NA, NA, "button_input_tables_tabs_accordions" ) ), contents_link( "Cookies", "cookies_button" ), ) ), shiny::column( width = 9, id = "main_col", # DO NOT REMOVE ID # Set up a nav panel so everything not on single page shiny::tabsetPanel( type = "hidden", id = "tab-container", # DO NOT REMOVE ID shiny::tabPanel( "Text Types", value = "text_types", gov_layout( size = "two-thirds", backlink_Input("back1"), heading_text("Page 2", size = "l"), label_hint( "label2", paste( "These are some examples of the", "types of user text inputs that you can use" ) ), heading_text("date_Input", size = "s"), date_Input( inputId = "date1", label = "What is your date of birth?", hint_label = "For example, 31 3 1980" ), heading_text("text_Input", size = "s"), text_Input( inputId = "txt1", label = "Event name" ), heading_text("text_area_Input", size = "s"), text_area_Input( inputId = "text_area1", label = "Can you provide more detail?", hint_label = paste( "Do not include personal or financial", "information, like your National Insurance", "number or credit card details." ) ), text_area_Input( inputId = "text_area2", label = "How are you today?", hint_label = "Leave blank to trigger error", error = TRUE, error_message = "Please do not leave blank", word_limit = 300 ), heading_text( "button_Input", size = "s", id = "button_input_text_types" ), button_Input("btn2", "Go to next page"), button_Input( "btn3", "Check for errors", type = "warning" ) ) ), shiny::tabPanel( "Tables, tabs and accordions", value = "tables_tabs_and_accordions", gov_layout( size = "two-thirds", backlink_Input("back2"), heading_text("Page 3", size = "l"), label_hint( "label3", paste( "These are some examples of using tabs", "type tables" ) ), heading_text("govTable", size = "s"), heading_text("govTabs", size = "s"), heading_text("accordions", size = "s"), shinyGovstyle::accordion( "acc1", c( "Writing well for the web", "Writing well for specialists", "Know your audience", "How people read" ), c( paste( "This is the content for Writing well", "for the web." ), paste( "This is the content for Writing well", "for specialists." ), paste( "This is the content for", "Know your audience." ), "This is the content for How people read." ) ), heading_text( "button_Input", size = "s", id = "button_input_tables_tabs_accordions" ), button_Input("btn4", "Go to next page"), ) ), #################### Create cookie panel ######### shiny::tabPanel( "Cookies", value = "panel-cookies", gov_layout( size = "two-thirds", heading_text("Cookie page", size = "l"), label_hint( "label-cookies", "This an example cookie page" ) ) ) ) ) ), # end of main_col footer(TRUE) ) # end of gov_row server <- function(input, output, session) { # Tab nav shiny::observeEvent(input$back2, { shiny::updateTabsetPanel( session, "tab-container", selected = "text_types" ) }) shiny::observeEvent(input$tables_tabs_and_accordions_button, { shiny::updateTabsetPanel( session, "tab-container", selected = "tables_tabs_and_accordions" ) }) shiny::observeEvent(input$cookies_button, { shiny::updateTabsetPanel( session, "tab-container", selected = "panel-cookies" ) }) } # end of server if (interactive()) shiny::shinyApp(ui = ui, server = server)
This function creates a cookie banner. You need to have
shinyjs::useShinyjs() enabled for this to work. All the Ids are preset.
See example for how to structure.
cookieBanner(service_name)cookieBanner(service_name)
service_name |
Name for this service to add to banner |
a cookie banner HTML shiny tag object
Other Govstyle page structure:
banner(),
footer(),
gov_layout(),
header(),
layouts,
skip_to_main()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png"), #Needs shinyjs to work shinyjs::useShinyjs(), shinyGovstyle::cookieBanner("The best thing"), shinyGovstyle::gov_layout(size = "two-thirds"), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Set of observeEvent to create a path through the cookie banner observeEvent(input$cookieAccept, { shinyjs::show(id = "cookieAcceptDiv") shinyjs::hide(id = "cookieMain") }) observeEvent(input$cookieReject, { shinyjs::show(id = "cookieRejectDiv") shinyjs::hide(id = "cookieMain") }) observeEvent(input$hideAccept, { shinyjs::toggle(id = "cookieDiv") }) observeEvent(input$hideReject, { shinyjs::toggle(id = "cookieDiv") }) observeEvent(input$cookieLink, { # Need to link here to where further info is located. You can use # updateTabsetPanel to have a cookie page for instance }) } if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png"), #Needs shinyjs to work shinyjs::useShinyjs(), shinyGovstyle::cookieBanner("The best thing"), shinyGovstyle::gov_layout(size = "two-thirds"), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Set of observeEvent to create a path through the cookie banner observeEvent(input$cookieAccept, { shinyjs::show(id = "cookieAcceptDiv") shinyjs::hide(id = "cookieMain") }) observeEvent(input$cookieReject, { shinyjs::show(id = "cookieRejectDiv") shinyjs::hide(id = "cookieMain") }) observeEvent(input$hideAccept, { shinyjs::toggle(id = "cookieDiv") }) observeEvent(input$hideReject, { shinyjs::toggle(id = "cookieDiv") }) observeEvent(input$cookieLink, { # Need to link here to where further info is located. You can use # updateTabsetPanel to have a cookie page for instance }) } if (interactive()) shinyApp(ui = ui, server = server)
This function create a date input that follows GDS component
date_Input( inputId, label, hint_label = NULL, error = FALSE, error_message = NULL, day = NULL, month = NULL, year = NULL )date_Input( inputId, label, hint_label = NULL, error = FALSE, error_message = NULL, day = NULL, month = NULL, year = NULL )
inputId |
The input slot that will be used to access the value |
label |
Display label for the control, or |
hint_label |
Display hint label for the control, or |
error |
Whenever to include error components.Defaults to |
error_message |
Error handling message? Defaults to |
day |
Select a default day on start up. Defaults to |
month |
Select a default month on start up. Defaults to |
year |
Select a default year on start up. Defaults to |
a data input HTML shiny tag object
Other Govstyle text types:
gov_list(),
heading_text(),
input_field(),
text_Input(),
text_area_Input(),
word_count()
ui <- shiny::fluidPage( # Required for error handling function. shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout( size = "two-thirds", # Simple date input shinyGovstyle::date_Input( inputId = "dob_input", label = "Please enter your birthday" ), # Error date input shinyGovstyle::date_Input( inputId = "dob_input2", label = "Please enter your birthday", hint_label = "For example, 12 11 2007", error = TRUE ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of dob_input2 observeEvent(input$submit, { if (input$dob_input2 == "//") { shinyGovstyle::error_on(inputId = "dob_input2") } else { shinyGovstyle::error_off(inputId = "dob_input2") } }) } if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( # Required for error handling function. shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout( size = "two-thirds", # Simple date input shinyGovstyle::date_Input( inputId = "dob_input", label = "Please enter your birthday" ), # Error date input shinyGovstyle::date_Input( inputId = "dob_input2", label = "Please enter your birthday", hint_label = "For example, 12 11 2007", error = TRUE ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of dob_input2 observeEvent(input$submit, { if (input$dob_input2 == "//") { shinyGovstyle::error_on(inputId = "dob_input2") } else { shinyGovstyle::error_off(inputId = "dob_input2") } }) } if (interactive()) shinyApp(ui = ui, server = server)
This function create a detail component that you can click for further details.
details(inputId, label, help_text)details(inputId, label, help_text)
inputId |
The input slot that will be used to access the value |
label |
Main label text |
help_text |
Additional help information in the component. Accepts a
plain character string, or |
a details box HTML shiny tag object
Other Govstyle feedback types:
gov_summary(),
insert_text(),
label_hint(),
noti_banner(),
panel_output(),
tag_Input(),
value_box(),
warning_text()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::details( inputId = "help_div", label = "Help with form", help_text = "To complete the form you need to fill it in..." ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::details( inputId = "help_div", label = "Help with form", help_text = "To complete the form you need to fill it in..." ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
The download_button() provides a standard way to provide a download
link, which facilitates important accessible / positive user experience
elements, namely:
file type
file size
These are necessary in order for users to understand what they are downloading, both in terms of being able to decide if they are comfortable with downloading the file over their current connection and if it's in a form they're able to deal with once it is downloaded. If the exact file size is not easily determined, then it may be acceptable to provide an estimate or an upper limit.
download_button(outputId, button_label, file_type = "CSV", file_size = NULL)download_button(outputId, button_label, file_type = "CSV", file_size = NULL)
outputId |
The name of the output slot that the
|
button_label |
Text that will appear describing the download action. Vague text like 'click here' or 'here' will cause an error, as will ending in a full stop. Leading and trailing white space will be automatically trimmed. If the string is shorter than 7 characters a console warning will be thrown. There is no way to hush this other than providing more detail |
file_type |
The file type to be download (default: CSV) |
file_size |
The file size if known. Needs to be a string ending in one of KB, MB, GB or rows |
shiny tag object
Other Govstyle actions:
download_link(),
download_radios(),
download_radios_handler(),
external_link()
ui <- shiny::fluidPage( gov_text("Choose a data set to download."), select_Input( "dataset", "Data set", select_text = c("Car road tests", "New York air quality"), select_value = c("mtcars", "airquality") ), download_button( "download_data", "Download selected data set", file_size = "4 KB" ) ) server <- function(input, output) { # The requested data set data <- reactive({ get(input$dataset) }) output$download_data <- downloadHandler( filename = function() { # Use the selected dataset as the suggested file name paste0(input$dataset, ".csv") }, content = function(file) { # Write the dataset to the `file` that will be downloaded write.csv(data(), file) } ) } if (interactive()) shiny::shinyApp(ui, server)ui <- shiny::fluidPage( gov_text("Choose a data set to download."), select_Input( "dataset", "Data set", select_text = c("Car road tests", "New York air quality"), select_value = c("mtcars", "airquality") ), download_button( "download_data", "Download selected data set", file_size = "4 KB" ) ) server <- function(input, output) { # The requested data set data <- reactive({ get(input$dataset) }) output$download_data <- downloadHandler( filename = function() { # Use the selected dataset as the suggested file name paste0(input$dataset, ".csv") }, content = function(file) { # Write the dataset to the `file` that will be downloaded write.csv(data(), file) } ) } if (interactive()) shiny::shinyApp(ui, server)
The download_link() provides a standard way to provide a download
link, which facilitates important accessible / positive user experience
elements, namely:
file type
file size
These are necessary in order for users to understand what they are downloading, both in terms of being able to decide if they are comfortable with downloading the file over their current connection and if it's in a form they're able to deal with once it is downloaded. If the exact file size is not easily determined, then it may be acceptable to provide an estimate or an upper limit.
download_link(outputId, link_text, file_type = "CSV", file_size = NULL)download_link(outputId, link_text, file_type = "CSV", file_size = NULL)
outputId |
The name of the output slot that the
|
link_text |
Text that will appear describing the download action. Vague text like 'click here' or 'here' will cause an error, as will ending in a full stop. Leading and trailing white space will be automatically trimmed. If the string is shorter than 7 characters a console warning will be thrown. There is no way to hush this other than providing more detail |
file_type |
The file type to be download (default: CSV) |
file_size |
The file size if known. Needs to be a string ending in one of KB, MB, GB or rows |
shiny tag object
Other Govstyle actions:
download_button(),
download_radios(),
download_radios_handler(),
external_link()
ui <- shiny::fluidPage( gov_text("Choose a data set to download."), select_Input( "dataset", "Data set", select_text = c("Car road tests", "New York air quality"), select_value = c("mtcars", "airquality") ), gov_text( download_link( "download_data", "Download selected data set", file_size = "4 KB" ) ) ) server <- function(input, output) { # The requested data set data <- reactive({ get(input$dataset) }) output$download_data <- downloadHandler( filename = function() { # Use the selected dataset as the suggested file name paste0(input$dataset, ".csv") }, content = function(file) { # Write the dataset to the `file` that will be downloaded write.csv(data(), file) } ) } if (interactive()) shiny::shinyApp(ui, server)ui <- shiny::fluidPage( gov_text("Choose a data set to download."), select_Input( "dataset", "Data set", select_text = c("Car road tests", "New York air quality"), select_value = c("mtcars", "airquality") ), gov_text( download_link( "download_data", "Download selected data set", file_size = "4 KB" ) ) ) server <- function(input, output) { # The requested data set data <- reactive({ get(input$dataset) }) output$download_data <- downloadHandler( filename = function() { # Use the selected dataset as the suggested file name paste0(input$dataset, ".csv") }, content = function(file) { # Write the dataset to the `file` that will be downloaded write.csv(data(), file) } ) } if (interactive()) shiny::shinyApp(ui, server)
Download with extension radios
download_radios( id = "download_radios", download_type = "table", file_types = c("CSV", "ODS", "XLSX"), file_sizes = c("< 1 GB", "< 1 GB", "< 1 GB"), small = FALSE )download_radios( id = "download_radios", download_type = "table", file_types = c("CSV", "ODS", "XLSX"), file_sizes = c("< 1 GB", "< 1 GB", "< 1 GB"), small = FALSE )
id |
Shiny element Id. Default is "download_radios", but must be
customised to be unique if multiple instances of this module are being
used in a single app. Must match up to the ID
of a |
download_type |
Element being downloaded. Expected to be along the lines of "underlying data", "table", "current data view". Default is "table" |
file_types |
File formats to offer, can be any combination of "CSV", "XLSX", "ODS". Default is a vector of all 3 |
file_sizes |
Estimated file sizes for each file format. This needs to be a vector of the same length as file_types |
small |
Set radio buttons to small size (logical, default: FALSE) |
UI containing radio selection and download button
Other Govstyle actions:
download_button(),
download_link(),
download_radios_handler(),
external_link()
ui <- shiny::fluidPage( download_radios("download_file", file_types = c("CSV", "ODS"), file_sizes = c("2 KB", "5 KB") ) ) server <- function(input, output, session) { output$download_file <- download_radios_handler( "download_file", file_name = "simple_data_frame", file_contents = mtcars ) } if (interactive()) shinyApp(ui, server)ui <- shiny::fluidPage( download_radios("download_file", file_types = c("CSV", "ODS"), file_sizes = c("2 KB", "5 KB") ) ) server <- function(input, output, session) { output$download_file <- download_radios_handler( "download_file", file_name = "simple_data_frame", file_contents = mtcars ) } if (interactive()) shinyApp(ui, server)
Download with extension radios handler
download_radios_handler(id = "download_radios", file_name, file_contents)download_radios_handler(id = "download_radios", file_name, file_contents)
id |
Shiny element Id. Default is "download_radios", but must be
customised to be unique if multiple instances of this module are being
used in a single app. Must match up to the ID of a |
file_name |
Name of the file to be downloaded |
file_contents |
Contents to write to the download file |
Output for use with download_radios()
Other Govstyle actions:
download_button(),
download_link(),
download_radios(),
external_link()
ui <- shiny::fluidPage( download_radios("download_file", file_types = c("CSV", "ODS"), file_sizes = c("2 KB", "5 KB") ) ) server <- function(input, output, session) { output$download_file <- download_radios_handler( "download_file", file_name = "simple_data_frame", file_contents = mtcars ) } if (interactive()) shinyApp(ui, server)ui <- shiny::fluidPage( download_radios("download_file", file_types = c("CSV", "ODS"), file_sizes = c("2 KB", "5 KB") ) ) server <- function(input, output, session) { output$download_file <- download_radios_handler( "download_file", file_name = "simple_data_frame", file_contents = mtcars ) } if (interactive()) shinyApp(ui, server)
This function turns off the the error o the component, once issues have been sorted.
error_off(inputId)error_off(inputId)
inputId |
The input Id to turn error handling on for |
no return value. This toggles off error CSS
Other Govstyle errors:
error_on(),
error_summary(),
error_summary_update()
ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout( size = "two-thirds", # Error text box shinyGovstyle::text_Input( inputId = "eventId", label = "Event Name", error = TRUE ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of eventId2 observeEvent(input$submit, { if (input$eventId != "") { shinyGovstyle::error_off(inputId = "eventId") } else { shinyGovstyle::error_on( inputId = "eventId", error_message = "Please complete" ) } }) } if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout( size = "two-thirds", # Error text box shinyGovstyle::text_Input( inputId = "eventId", label = "Event Name", error = TRUE ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of eventId2 observeEvent(input$submit, { if (input$eventId != "") { shinyGovstyle::error_off(inputId = "eventId") } else { shinyGovstyle::error_on( inputId = "eventId", error_message = "Please complete" ) } }) } if (interactive()) shinyApp(ui = ui, server = server)
This function turns on the error for the component. Can be used to validate inputs.
error_on(inputId, error_message = NULL)error_on(inputId, error_message = NULL)
inputId |
The input id that you to to turn the error on for |
error_message |
if you want to add an additional error message Defaults to NULL, showing the original designed error message |
no return value. This toggles on error CSS
Other Govstyle errors:
error_off(),
error_summary(),
error_summary_update()
ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout(size = "two-thirds", # Error text box shinyGovstyle::text_Input( inputId = "eventId", label = "Event Name", error = TRUE), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of eventId2 observeEvent(input$submit, { if (input$eventId != ""){ shinyGovstyle::error_off(inputId = "eventId") } else { shinyGovstyle::error_on( inputId = "eventId", error_message = "Please complete" ) } }) } if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout(size = "two-thirds", # Error text box shinyGovstyle::text_Input( inputId = "eventId", label = "Event Name", error = TRUE), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of eventId2 observeEvent(input$submit, { if (input$eventId != ""){ shinyGovstyle::error_off(inputId = "eventId") } else { shinyGovstyle::error_on( inputId = "eventId", error_message = "Please complete" ) } }) } if (interactive()) shinyApp(ui = ui, server = server)
This function loads the error summary component to display error text. This replicates the gov style error boxes linked below: https://design-system.service.gov.uk/components/error-summary/
error_summary(inputId, error_title, error_list)error_summary(inputId, error_title, error_list)
inputId |
The input slot that will be used to access the value |
error_title |
The title for the error summary |
error_list |
A list of text values to be displayed in the error body |
an error_summary HTML shiny tag object
Other Govstyle errors:
error_off(),
error_on(),
error_summary_update()
ui <- shiny::fluidPage( shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", error_summary( inputId = "errorId", error_title = "Error title", error_list = c("error item1", "error item2") ) ), shinyGovstyle::button_Input("btn1", "Change error summary"), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { shiny::observeEvent(input$btn1, { error_summary_update( "errorId", c("error item1", "error item2", "error item3") )}, ignoreInit = TRUE ) } if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", error_summary( inputId = "errorId", error_title = "Error title", error_list = c("error item1", "error item2") ) ), shinyGovstyle::button_Input("btn1", "Change error summary"), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { shiny::observeEvent(input$btn1, { error_summary_update( "errorId", c("error item1", "error item2", "error item3") )}, ignoreInit = TRUE ) } if (interactive()) shinyApp(ui = ui, server = server)
This function changes the text that displays in the error summary box.
Requires shinyjs::useShinyjs() to work.
error_summary_update(inputId, error_list)error_summary_update(inputId, error_list)
inputId |
The input Id of the error summary you want to update |
error_list |
An updated list of text values to be displayed in the error body |
an update error summary box
Other Govstyle errors:
error_off(),
error_on(),
error_summary()
ui <- shiny::fluidPage( shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", error_summary( inputId = "errorId", error_title = "Error title", error_list = c("error item1", "error item2") ) ), shinyGovstyle::button_Input("btn1", "Change error summary"), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { shiny::observeEvent(input$btn1, { error_summary_update( "errorId", c("error item1", "error item2", "error item3") ) }, ignoreInit = TRUE ) } if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", error_summary( inputId = "errorId", error_title = "Error title", error_list = c("error item1", "error item2") ) ), shinyGovstyle::button_Input("btn1", "Change error summary"), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { shiny::observeEvent(input$btn1, { error_summary_update( "errorId", c("error item1", "error item2", "error item3") ) }, ignoreInit = TRUE ) } if (interactive()) shinyApp(ui = ui, server = server)
It is commonplace for external links to open in a new tab, and when we do this we should be careful...
This function automatically adds the following to your link:
target="_blank" to open in new tab
rel="noopener noreferrer" to prevent reverse tabnabbing
By default this function also adds "(opens in new tab)" to your link text to warn users of the behaviour.
This also adds "This link opens in a new tab" as a visually hidden span element within the HTML outputted to warn non-visual users of the behaviour.
The function will error if you end with a full stop, give a warning for particularly short link text and will automatically trim any leading or trailing white space inputted into link_text.
If you are displaying lots of links together and want to save space by avoiding repeating (opens in new tab), then you can set add_warning = FALSE and add a line of text above all of the links saying something like 'The following links open in a new tab'.
Related links and guidance:
external_link(href, link_text, add_warning = TRUE, footer = FALSE)external_link(href, link_text, add_warning = TRUE, footer = FALSE)
href |
URL that you want the link to point to |
link_text |
Text that will appear describing your link, must be descriptive of the page you are linking to. Vague text like 'click here' or 'here' will cause an error, as will ending in a full stop. Leading and trailing white space will be automatically trimmed. If the string is shorter than 7 characters a console warning will be thrown. There is no way to hush this other than providing more detail |
add_warning |
Boolean for adding "(opens in new tab)" at the end of the link text to warn users of the behaviour. Be careful and consider accessibility before removing the visual warning |
footer |
Apply standard GDS footer CSS styling. Logical, default = FALSE |
Intentionally basic wrapper for HTML anchor elements making it easier to
create safe external links with standard and accessible behaviour. For more
information on how the tag is generated, see htmltools::tags().
shiny tag object
Other Govstyle actions:
download_button(),
download_link(),
download_radios(),
download_radios_handler()
external_link("https://shiny.posit.co/", "R Shiny") external_link( "https://shiny.posit.co/", "R Shiny", add_warning = FALSE ) # This will trim and show as 'R Shiny' external_link("https://shiny.posit.co/", " R Shiny") # Example of within text shiny::tags$p( "Oi, ", external_link("https://shiny.posit.co/", "R Shiny"), " is great." ) # Example of multiple links together shiny::tags$h2("Related resources") shiny::tags$p("The following links open in a new tab.") shiny::tags$ul( shiny::tags$li( external_link( "https://shiny.posit.co/", "R Shiny documentation", add_warning = FALSE ) ), shiny::tags$li( external_link( "https://www.python.org/", "Python documentation", add_warning = FALSE ) ), shiny::tags$li( external_link( "https://nextjs.org/", "Next.js documentation", add_warning = FALSE ) ) )external_link("https://shiny.posit.co/", "R Shiny") external_link( "https://shiny.posit.co/", "R Shiny", add_warning = FALSE ) # This will trim and show as 'R Shiny' external_link("https://shiny.posit.co/", " R Shiny") # Example of within text shiny::tags$p( "Oi, ", external_link("https://shiny.posit.co/", "R Shiny"), " is great." ) # Example of multiple links together shiny::tags$h2("Related resources") shiny::tags$p("The following links open in a new tab.") shiny::tags$ul( shiny::tags$li( external_link( "https://shiny.posit.co/", "R Shiny documentation", add_warning = FALSE ) ), shiny::tags$li( external_link( "https://www.python.org/", "Python documentation", add_warning = FALSE ) ), shiny::tags$li( external_link( "https://nextjs.org/", "Next.js documentation", add_warning = FALSE ) ) )
This function create a file upload component. It uses the basis of the shiny fileInput function, but restyles the label and adds error onto it.
file_Input( inputId, label, multiple = FALSE, accept = NULL, width = NULL, buttonLabel = "Choose file", placeholder = "No file chosen", error = FALSE, error_message = NULL )file_Input( inputId, label, multiple = FALSE, accept = NULL, width = NULL, buttonLabel = "Choose file", placeholder = "No file chosen", error = FALSE, error_message = NULL )
inputId |
The input slot that will be used to access the value |
label |
Display label for the control, or |
multiple |
Whether the user should be allowed to select and upload multiple files at once. Does not work on older browsers, including Internet Explorer 9 and earlier |
accept |
A character vector of MIME types; gives the browser a hint of what kind of files the server is expecting |
width |
The width of the input, e.g. |
buttonLabel |
The label used on the button. Can be text or an HTML tag object |
placeholder |
The text to show before a file has been uploaded |
error |
Whenever to icnlud error handling. Defaults to FALSE |
error_message |
Message to display on error. Defaults to NULL |
a file input HTML shiny tag object
Other Govstyle select inputs:
button_Input(),
checkbox_Input(),
radio_button_Input(),
select_Input()
ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout(size = "two-thirds", # Simple file input shinyGovstyle::file_Input(inputId = "file1", label = "Upload a file"), # Error file shinyGovstyle::file_Input( inputId = "file2", label = "Upload a file", error = TRUE ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of file2 observeEvent(input$submit, { if (is.null(input$file2)){ shinyGovstyle::error_on(inputId = "file2") } else { shinyGovstyle::error_off( inputId = "file2" ) } }) } if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout(size = "two-thirds", # Simple file input shinyGovstyle::file_Input(inputId = "file1", label = "Upload a file"), # Error file shinyGovstyle::file_Input( inputId = "file2", label = "Upload a file", error = TRUE ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of file2 observeEvent(input$submit, { if (is.null(input$file2)){ shinyGovstyle::error_on(inputId = "file2") } else { shinyGovstyle::error_off( inputId = "file2" ) } }) } if (interactive()) shinyApp(ui = ui, server = server)
Loads the GDS Transport font for use in your app. GDS Transport is a restricted typeface that must only be used on GOV.UK domains. If your app is not hosted on a GOV.UK domain, do not call this function — the GOV.UK Frontend CSS will fall back to Helvetica or Arial automatically.
font()font()
See the GOV.UK typeface guidance for full details on when GDS Transport is permitted.
no value returned. This loads the font CSS file
Other Govstyle styling:
full_width_overrides()
ui <- shiny::fluidPage( font(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png") ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( font(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png") ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
This is an experimental function that will likely be removed in future
releases, as we work through updating the core package styling and
adding full width options into the components themselves. This is not
well tested and may cause unexpected styling issues when combined with
components from other packages, use at your own risk.
full_width_overrides()full_width_overrides()
HTML containing CSS styling overrides
Other Govstyle styling:
font()
shinyGovstyle::full_width_overrides()shinyGovstyle::full_width_overrides()
This function loads the page layout, This doesn't work as well as
the gov_main_layout and associated functions. This is being kept for now
as a simpler version where grids are not needed.
gov_layout(..., inputID = "main", size = "full")gov_layout(..., inputID = "main", size = "full")
... |
include the components of the UI that you want within the main page. |
inputID |
ID of the main div. Defaults to "main" |
size |
Layout of the page. Optional are full, one-half, two-thirds, one-third and one-quarter. Defaults to "full" |
a HTML shiny layout div
Other Govstyle page structure:
banner(),
cookieBanner(),
footer(),
header(),
layouts,
skip_to_main()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "full", shinyGovstyle::panel_output( inputId = "panel1", main_text = "Application Complete", sub_text = paste( "Thank you for submitting your application.", "Your reference is xvsiq" ) ), shinyGovstyle::footer(full = TRUE) ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "full", shinyGovstyle::panel_output( inputId = "panel1", main_text = "Application Complete", sub_text = paste( "Thank you for submitting your application.", "Your reference is xvsiq" ) ), shinyGovstyle::footer(full = TRUE) ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
Gov List function
gov_list(list, style = "none")gov_list(list, style = "none")
list |
vector of list |
style |
options: "none", "bullet", "number". defaults to "none" |
Other Govstyle text types:
date_Input(),
heading_text(),
input_field(),
text_Input(),
text_area_Input(),
word_count()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::heading_text("gov_list", size = "s"), shinyGovstyle::gov_text("List:"), gov_list(list = c("a", "b", "c")), shinyGovstyle::gov_text("Bulleted list:"), gov_list(list = c("a", "b", "c"), style = "bullet"), shinyGovstyle::gov_text("Numbered list:"), gov_list(list = c("one", "two", "three"), style = "number") ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::heading_text("gov_list", size = "s"), shinyGovstyle::gov_text("List:"), gov_list(list = c("a", "b", "c")), shinyGovstyle::gov_text("Bulleted list:"), gov_list(list = c("a", "b", "c"), style = "bullet"), shinyGovstyle::gov_text("Numbered list:"), gov_list(list = c("one", "two", "three"), style = "number") ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
This function creates a tabs based table. It requires a single dataframe with a grouping variable.
gov_summary(inputId, headers, info, action = FALSE, border = TRUE)gov_summary(inputId, headers, info, action = FALSE, border = TRUE)
inputId |
The Id to access the summary list |
headers |
input for the row headers value |
info |
Summary information values for the table. Each value accepts a
plain character string, or |
action |
whenever a change link is needed. Sets input to the value of
the headers using lowercase and with underscore to replace gaps. Default
set to |
border |
set if the table should have borders. Default set
to |
a summary list table HTML shiny tag object
Other Govstyle feedback types:
details(),
insert_text(),
label_hint(),
noti_banner(),
panel_output(),
tag_Input(),
value_box(),
warning_text()
# Create an example dataset headers <- c( "Name", "Date of birth", "Contact information", "Contact details" ) info <- c( "Sarah Philips", "5 January 1978", "72 Guild Street <br> London <br> SE23 6FH", "07700 900457 <br> [email protected]" ) ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::gov_summary("sumID", headers, info, action = FALSE) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)# Create an example dataset headers <- c( "Name", "Date of birth", "Contact information", "Contact details" ) info <- c( "Sarah Philips", "5 January 1978", "72 Guild Street <br> London <br> SE23 6FH", "07700 900457 <br> [email protected]" ) ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::gov_summary("sumID", headers, info, action = FALSE) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
This function is opinionated and sets table defaults that are in
keeping with the wider GOV.UK design system. Some defaults are overrideable,
such as highlight=TRUE and borderless=TRUE, however some are fixed, such
as showSortIcon=FALSE as the default sort icon is inaccessible. Additional
arguments from reactable::reactable can be passed to customise the table.
govReactable( df, right_col = NULL, page_size = 10, highlight = TRUE, borderless = TRUE, min_widths = list(), ... )govReactable( df, right_col = NULL, page_size = 10, highlight = TRUE, borderless = TRUE, min_widths = list(), ... )
df |
A dataframe used to generate the table |
right_col |
A vector of column names that should be right-aligned. By default, numeric data is right-aligned, and character data is left-aligned |
page_size |
The default number of rows displayed per page (default: 10) |
highlight |
Highlight table rows on hover |
borderless |
Remove inner borders from table |
min_widths |
Customise minimum column width using a list of columns and minimum width in pixels |
... |
Additional arguments passed to |
This function inserts a government-styled table using reactable.
You can use this in R markdown or Quarto documents, or use
renderGovReactable() and govReactableOutput() for tables in R Shiny.
govReactableOutput() gives the ability to add a caption, for static
tables made using just govReactable(), use heading_text() to add
captions to tables.
A reactable HTML widget styled with GOV.UK classes
Other Govstyle tables tabs and accordions:
accordion(),
govReactable-shiny,
govTable(),
govTabs()
# Example static table using govReactable if (interactive()) { govReactable( iris, right_col = c( "Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width" ) ) govReactable( iris, right_col = c( "Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width" ), highlight = FALSE, page_size = 5, min_widths = list( Sepal.Length = 75, Sepal.Width = 75, Petal.Length = 75, Petal.Width = 75 ) ) }# Example static table using govReactable if (interactive()) { govReactable( iris, right_col = c( "Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width" ) ) govReactable( iris, right_col = c( "Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width" ), highlight = FALSE, page_size = 5, min_widths = list( Sepal.Length = 75, Sepal.Width = 75, Petal.Length = 75, Petal.Width = 75 ) ) }
Shiny bindings for govReactable Output and render functions for using govReactable within shiny apps
govReactableOutput( output_table_name, caption, caption_size = "l", heading_level = "h2" ) renderGovReactable(expr, env = parent.frame(), quoted = FALSE)govReactableOutput( output_table_name, caption, caption_size = "l", heading_level = "h2" ) renderGovReactable(expr, env = parent.frame(), quoted = FALSE)
output_table_name |
Output variable to read from |
caption |
Adds a caption to the table as a header |
caption_size |
Adjust the size of caption Options are s, m, l, xl, with l as the default |
heading_level |
The HTML heading level for the caption (e.g., "h2", "h3", "h4", "h5"). Default is "h2" |
expr |
An expression that generates a |
env |
The environment in which to evaluate |
quoted |
Is |
govReactableOutput() returns a reactable output element
that can be included in a Shiny UI
renderGovReactable() returns a reactable render function that
can be assigned to a Shiny output slot
Other Govstyle tables tabs and accordions:
accordion(),
govReactable(),
govTable(),
govTabs()
ui <- shiny::fluidPage( govReactableOutput( "table", caption = "Example table" ) ) server <- function(input, output, session) { output$table <- renderGovReactable({ govReactable(iris) }) } if (interactive()) shinyApp(ui, server)ui <- shiny::fluidPage( govReactableOutput( "table", caption = "Example table" ) ) server <- function(input, output, session) { output$table <- renderGovReactable({ govReactable(iris) }) } if (interactive()) shinyApp(ui, server)
This function inserts a gov styled table. Format is with header looking rows and columns
govTable( inputId, df, caption, caption_size = "l", num_col = NULL, width_overwrite = NULL )govTable( inputId, df, caption, caption_size = "l", num_col = NULL, width_overwrite = NULL )
inputId |
Input Id for the table |
df |
expects a dataframe to create a table |
caption |
adds a caption to the table as a header |
caption_size |
adjust the size of caption. Options are s, m, l, xl, with l as the default |
num_col |
adds numeric class format to these columns |
width_overwrite |
change width. Need to include width for every column.
Columns must add up to 1.
Options are three-quarters, two-thirds, one-half, one-third, one-quarter.
Default is |
a table HTML shiny tag object
Other Govstyle tables tabs and accordions:
accordion(),
govReactable(),
govReactable-shiny,
govTabs()
ui <- shiny::fluidPage( shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::govTable( "tab1", shinyGovstyle::transport_data_small, "Test", "l", num_col = c(2,3), width_overwrite = c("one-half", "one-quarter", "one-quarter") ) ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::govTable( "tab1", shinyGovstyle::transport_data_small, "Test", "l", num_col = c(2,3), width_overwrite = c("one-half", "one-quarter", "one-quarter") ) ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
This function creates a tabs based table. It requires a single dataframe with a grouping variable.
govTabs(inputId, df, group_col)govTabs(inputId, df, group_col)
inputId |
The Id to access the tag |
df |
A single dataframe with all data. See example for structure |
group_col |
The column name with the groups to be used as tabs |
a tab table HTML shiny tag object
Other Govstyle tables tabs and accordions:
accordion(),
govReactable(),
govReactable-shiny,
govTable()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png", logo_alt_text = "Ministry of Justice logo" ), shinyGovstyle::gov_main_layout( size = "two-thirds", shinyGovstyle::govTabs("tabs", shinyGovstyle::case_data, "tabs") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png", logo_alt_text = "Ministry of Justice logo" ), shinyGovstyle::gov_main_layout( size = "two-thirds", shinyGovstyle::govTabs("tabs", shinyGovstyle::case_data, "tabs") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
This function create a header banner. For use at top of the screen
header( org_name = "Shiny example app", service_name = NULL, logo = "shinyGovstyle/images/Dept_logo.svg", main_text = lifecycle::deprecated(), secondary_text = lifecycle::deprecated(), main_link = lifecycle::deprecated(), secondary_link = lifecycle::deprecated(), logo_alt_text = "Departmental logo", main_alt_text = lifecycle::deprecated(), secondary_alt_text = lifecycle::deprecated(), logo_width = 66, logo_height = 34 )header( org_name = "Shiny example app", service_name = NULL, logo = "shinyGovstyle/images/Dept_logo.svg", main_text = lifecycle::deprecated(), secondary_text = lifecycle::deprecated(), main_link = lifecycle::deprecated(), secondary_link = lifecycle::deprecated(), logo_alt_text = "Departmental logo", main_alt_text = lifecycle::deprecated(), secondary_alt_text = lifecycle::deprecated(), logo_width = 66, logo_height = 34 )
a header HTML shiny tag object
Other Govstyle page structure:
banner(),
cookieBanner(),
footer(),
gov_layout(),
layouts,
skip_to_main()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png", logo_alt_text = "Ministry of Justice Logo" ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png", logo_alt_text = "Ministry of Justice Logo" ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
This function createS heading text
heading_text(text_input, size = "xl", id, level = 1)heading_text(text_input, size = "xl", id, level = 1)
text_input |
Text to display |
size |
Text size using xl, l, m, s. Defaults to xl |
id |
Custom header id |
level |
Heading level, integer between 1 and 6. Defaults to 1 |
a heading text HTML shiny tag object
Other Govstyle text types:
date_Input(),
gov_list(),
input_field(),
text_Input(),
text_area_Input(),
word_count()
shinyGovstyle::heading_text("This is great text") shinyGovstyle::heading_text("This is great text", size = "l", level = 2)shinyGovstyle::heading_text("This is great text") shinyGovstyle::heading_text("This is great text", size = "l", level = 2)
This function inserts number of text inputs. Useful for addresses.
input_field( legend, labels, inputIds, widths = NULL, types = "text", error = FALSE, error_message = NULL )input_field( legend, labels, inputIds, widths = NULL, types = "text", error = FALSE, error_message = NULL )
legend |
Legend that goes above the fieldset |
labels |
A list of labels for the text inputs |
inputIds |
A list input slots that will be used to access the value |
widths |
control the size of the box based on number of characters required. Options are 30, 20, 10, 5, 4, 3, 2. NULL will not limit the size |
types |
text box types. Will default to text |
error |
Whenever to icnlud error handling. Defaults to FALSE |
error_message |
Message to display on error. Defaults to NULL |
a input field of HTML as a shiny tag object
Other Govstyle text types:
date_Input(),
gov_list(),
heading_text(),
text_Input(),
text_area_Input(),
word_count()
ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::input_field( legend ="List of three text boxes in a field", labels = c("Field 1", "Field 2", "Field 3"), inputIds = c("field1", "field2", "field3"), widths = c(30,20,10), error = TRUE ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of field2 observeEvent(input$submit, { if (input$field2 == ""){ shinyGovstyle::error_on( inputId = "field2", error_message = "Please complete" ) } else { shinyGovstyle::error_off( inputId = "field2" ) } }) } if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::input_field( legend ="List of three text boxes in a field", labels = c("Field 1", "Field 2", "Field 3"), inputIds = c("field1", "field2", "field3"), widths = c(30,20,10), error = TRUE ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of field2 observeEvent(input$submit, { if (input$field2 == ""){ shinyGovstyle::error_on( inputId = "field2", error_message = "Please complete" ) } else { shinyGovstyle::error_off( inputId = "field2" ) } }) } if (interactive()) shinyApp(ui = ui, server = server)
This function loads the insert text component to display additional information in a special format.
insert_text(inputId, content, text = lifecycle::deprecated())insert_text(inputId, content, text = lifecycle::deprecated())
inputId |
The input slot that will be used to access the value |
content |
Content to display on the insert. Accepts a plain character
string, or |
text |
a insert text HTML shiny tag object
Other Govstyle feedback types:
details(),
gov_summary(),
label_hint(),
noti_banner(),
panel_output(),
tag_Input(),
value_box(),
warning_text()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::insert_text( inputId = "note", content = paste( "It can take up to 8 weeks to register a lasting power of", "attorney if there are no mistakes in the application." ) ), shinyGovstyle::insert_text( inputId = "note-rich", content = shiny::tagList( shiny::tags$b("Important: "), "you can also pass tag objects." ) ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::insert_text( inputId = "note", content = paste( "It can take up to 8 weeks to register a lasting power of", "attorney if there are no mistakes in the application." ) ), shinyGovstyle::insert_text( inputId = "note-rich", content = shiny::tagList( shiny::tags$b("Important: "), "you can also pass tag objects." ) ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
This function inserts a label and optional hint.
label_hint(inputId, label, hint_input = NULL)label_hint(inputId, label, hint_input = NULL)
inputId |
The input slot that will be used to access the value |
label |
Display label for the control, or |
hint_input |
Display hint label for the control, or |
a label hint HTML shiny tag object
Other Govstyle feedback types:
details(),
gov_summary(),
insert_text(),
noti_banner(),
panel_output(),
tag_Input(),
value_box(),
warning_text()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", label_hint( inputId = "label1", label = "This is a label", hint_input = "This is a hint" ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", label_hint( inputId = "label1", label = "This is a label", hint_input = "This is a hint" ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
These function loads the page layout in a gov layout. There is a selection of components that can sit within each other. The gov_main_layout is the overarching layout. The gov_row creates a each row and gov_box creates a box within the row. The gov_text is a container for text bodies.
gov_main_layout(..., inputID = "main") gov_row(...) gov_box(..., size = "full") gov_text(...)gov_main_layout(..., inputID = "main") gov_row(...) gov_box(..., size = "full") gov_text(...)
... |
include the components of the UI that you want within the main page. These components are made to flow through each other. See example |
inputID |
ID of the main div. Defaults to "main" |
size |
size of the box in the row. Optional are full, one-half, two-thirds, one-third and one-quarter. Defaults to "full" |
a HTML shiny layout div
Other Govstyle page structure:
banner(),
cookieBanner(),
footer(),
gov_layout(),
header(),
skip_to_main()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png"), shinyGovstyle::gov_main_layout( shinyGovstyle::gov_row( shinyGovstyle::gov_box( size = "full", shinyGovstyle::gov_text("govuk-grid-column-full") ) ), shinyGovstyle::gov_row( shinyGovstyle::gov_box( size = "one-half", shinyGovstyle::gov_text("govuk-grid-column-one-half") ), shinyGovstyle::gov_box( size = "one-half", shinyGovstyle::gov_text("govuk-grid-column-one-half") ) ), shinyGovstyle::gov_row( shinyGovstyle::gov_box( size = "one-third", shinyGovstyle::gov_text("govuk-grid-column-one-third") ), shinyGovstyle::gov_box( size = "two-third", shinyGovstyle::gov_text("govuk-grid-column-two-third") ) ), shinyGovstyle::gov_row( shinyGovstyle::gov_box( size = "one-quarter", shinyGovstyle::gov_text("govuk-grid-column-one-quarter") ), shinyGovstyle::gov_box( size = "three-quarters", shinyGovstyle::gov_text("govuk-grid-column-three-quarters") ) ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png"), shinyGovstyle::gov_main_layout( shinyGovstyle::gov_row( shinyGovstyle::gov_box( size = "full", shinyGovstyle::gov_text("govuk-grid-column-full") ) ), shinyGovstyle::gov_row( shinyGovstyle::gov_box( size = "one-half", shinyGovstyle::gov_text("govuk-grid-column-one-half") ), shinyGovstyle::gov_box( size = "one-half", shinyGovstyle::gov_text("govuk-grid-column-one-half") ) ), shinyGovstyle::gov_row( shinyGovstyle::gov_box( size = "one-third", shinyGovstyle::gov_text("govuk-grid-column-one-third") ), shinyGovstyle::gov_box( size = "two-third", shinyGovstyle::gov_text("govuk-grid-column-two-third") ) ), shinyGovstyle::gov_row( shinyGovstyle::gov_box( size = "one-quarter", shinyGovstyle::gov_text("govuk-grid-column-one-quarter") ), shinyGovstyle::gov_box( size = "three-quarters", shinyGovstyle::gov_text("govuk-grid-column-three-quarters") ) ) ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
This function creates a notification banner.
noti_banner( inputId, title_txt = "Important", body_txt = NULL, type = "standard" )noti_banner( inputId, title_txt = "Important", body_txt = NULL, type = "standard" )
inputId |
The input Id for the banner |
title_txt |
The wording that appears in the title |
body_txt |
The wording that appears in the banner body. Accepts a
plain character string, or |
type |
The type of banner. Options are standard and success. Standard is default |
a notification HTML shiny tag object
Other Govstyle feedback types:
details(),
gov_summary(),
insert_text(),
label_hint(),
panel_output(),
tag_Input(),
value_box(),
warning_text()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::noti_banner( inputId = "banner", title_txt = "Important", body_txt = "Example text" ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::noti_banner( inputId = "banner", title_txt = "Important", body_txt = "Example text" ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
This function inserts a panel. Normally used for confirmation screens
panel_output(inputId, main_text, sub_text)panel_output(inputId, main_text, sub_text)
inputId |
The input slot that will be used to access the value. |
main_text |
Add the header for the panel |
sub_text |
Add the main body of text for the panel. Accepts a plain
character string, or |
a panel HTML shiny tag object
Other Govstyle feedback types:
details(),
gov_summary(),
insert_text(),
label_hint(),
noti_banner(),
tag_Input(),
value_box(),
warning_text()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout(size = "full", shinyGovstyle::panel_output( inputId = "panel1", main_text = "Application Complete", sub_text = paste( "Thank you for submitting your application.", "Your reference is xvsiq" ) ), shinyGovstyle::footer(full = TRUE) ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout(size = "full", shinyGovstyle::panel_output( inputId = "panel1", main_text = "Application Complete", sub_text = paste( "Thank you for submitting your application.", "Your reference is xvsiq" ) ), shinyGovstyle::footer(full = TRUE) ) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
This function create radio buttons
radio_button_Input( inputId, label, choices = NULL, selected = NULL, inline = FALSE, small = FALSE, choiceNames = NULL, choiceValues = NULL, hint_label = NULL, error = FALSE, error_message = NULL, custom_class = "" )radio_button_Input( inputId, label, choices = NULL, selected = NULL, inline = FALSE, small = FALSE, choiceNames = NULL, choiceValues = NULL, hint_label = NULL, error = FALSE, error_message = NULL, custom_class = "" )
inputId |
The |
label |
Input label |
choices |
List of values to select from (if elements of the list are named then that name rather than the value is displayed to the user) |
selected |
The initially selected value. |
inline |
If you want the radio inline or not, Default is FALSE |
small |
If you want the smaller versions of radio buttons, Default is FALSE |
choiceNames, choiceValues
|
Same as in
|
hint_label |
Additional hint text you may want to display below the label. Defaults to NULL |
error |
Whenever you want to include error handle on the component |
error_message |
If you want a default error message |
custom_class |
If you want to add additional classes to the radio buttons |
radio buttons HTML shiny tag object
Other Govstyle select inputs:
button_Input(),
checkbox_Input(),
file_Input(),
select_Input()
ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", "This is a new service" ), shinyGovstyle::gov_layout( size = "two-thirds", # Simple radio shinyGovstyle::radio_button_Input( inputId = "radio1", choices = c("Yes", "No", "Maybe"), label = "Choice option" ), # Error radio shinyGovstyle::radio_button_Input( inputId = "radio2", choices = c("Yes", "No", "Maybe"), label = "Choice option", hint_label = "Select the best fit", inline = TRUE, error = TRUE, error_message = "Select one" ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of eventId2 observeEvent(input$submit, { if (is.null(input$radio2)) { shinyGovstyle::error_on(inputId = "radio2") } else { shinyGovstyle::error_off( inputId = "radio2" ) } }) } if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", "This is a new service" ), shinyGovstyle::gov_layout( size = "two-thirds", # Simple radio shinyGovstyle::radio_button_Input( inputId = "radio1", choices = c("Yes", "No", "Maybe"), label = "Choice option" ), # Error radio shinyGovstyle::radio_button_Input( inputId = "radio2", choices = c("Yes", "No", "Maybe"), label = "Choice option", hint_label = "Select the best fit", inline = TRUE, error = TRUE, error_message = "Select one" ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of eventId2 observeEvent(input$submit, { if (is.null(input$radio2)) { shinyGovstyle::error_on(inputId = "radio2") } else { shinyGovstyle::error_off( inputId = "radio2" ) } }) } if (interactive()) shinyApp(ui = ui, server = server)
This function runs an example R Shiny app showcasing different parts of the package. Code for the app can be found in the inst/example_app folder in the source code.
run_example()run_example()
The app uses the bslib package as is generally recommended for Shiny apps.
The app is also deployed at the following URL: https://department-for-education.shinyapps.io/shinygovstyle-example-app/
runs an R Shiny app with examples in
if (interactive()) run_example()if (interactive()) run_example()
This function inserts a select box
select_Input(inputId, label, select_text, select_value)select_Input(inputId, label, select_text, select_value)
inputId |
Input Id for the component |
label |
Insert the text for the label |
select_text |
Add the text that will apply in the drop down as a list |
select_value |
Add the value that will be used for each selection |
a select input HTML shiny tag object
Other Govstyle select inputs:
button_Input(),
checkbox_Input(),
file_Input(),
radio_button_Input()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png", logo_alt_text = "Ministry of Justice logo" ), shinyGovstyle::gov_layout( size = "full", select_Input( inputId = "sorter", label = "Sort by", select_text = c( "Recently published", "Recently updated", "Most views", "Most comments" ), select_value = c("published", "updated", "view", "comments") ), shiny::tags$br() ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png", logo_alt_text = "Ministry of Justice logo" ), shinyGovstyle::gov_layout( size = "full", select_Input( inputId = "sorter", label = "Sort by", select_text = c( "Recently published", "Recently updated", "Most views", "Most comments" ), select_value = c("published", "updated", "view", "comments") ), shiny::tags$br() ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
This function generates a 'Skip to main content' link, which is typically used by keyboard users to bypass content and navigate directly to the main content of a page.
skip_to_main(id = "main")skip_to_main(id = "main")
id |
An optional parameter to specify the Id of the main content
section, will be automatically preceeded by a hash '#'. Default is
"main" to match the "#main" Id within |
A Shiny tag representing the 'Skip to main content' link
Other Govstyle page structure:
banner(),
cookieBanner(),
footer(),
gov_layout(),
header(),
layouts
ui <- shiny::fluidPage( skip_to_main(), header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), gov_main_layout( heading_text("Example heading"), ) ) server <- function(input, output, session){} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( skip_to_main(), header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), gov_main_layout( heading_text("Example heading"), ) ) server <- function(input, output, session){} if (interactive()) shinyApp(ui = ui, server = server)
This function creates a tag.
tag_Input(inputId, text, colour = "navy")tag_Input(inputId, text, colour = "navy")
inputId |
The Id to access the tag |
text |
The text in the tag |
colour |
The colour of the tag. Default is navy. Other options are grey, green, teal, blue, purple, magenta, red, orange and yellow |
a tag HTML shiny tag object
Other Govstyle feedback types:
details(),
gov_summary(),
insert_text(),
label_hint(),
noti_banner(),
panel_output(),
value_box(),
warning_text()
ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::tag_Input("tag1", "Complete"), shinyGovstyle::tag_Input("tag2", "Incomplete", "red") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo="shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::gov_layout( size = "two-thirds", shinyGovstyle::tag_Input("tag1", "Complete"), shinyGovstyle::tag_Input("tag2", "Incomplete", "red") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) {} if (interactive()) shinyApp(ui = ui, server = server)
This function create a text area input.
text_area_Input( inputId, label, hint_label = NULL, row_no = 5, error = FALSE, error_message = NULL, word_limit = NULL )text_area_Input( inputId, label, hint_label = NULL, row_no = 5, error = FALSE, error_message = NULL, word_limit = NULL )
inputId |
The input slot that will be used to access the value |
label |
Display label for the control, or |
hint_label |
Display hint label for the control, or |
row_no |
Size of the text entry box. Defaults to 5 |
error |
Whenever to include error handling. Defaults to |
error_message |
Message to display on error. Defaults to |
word_limit |
Add a word limit to the display. Defaults to |
a text area box HTML shiny tag object
Other Govstyle text types:
date_Input(),
gov_list(),
heading_text(),
input_field(),
text_Input(),
word_count()
text_area_Input( "taId", "Can you provide more detail?", paste( "Do not include personal or financial information, like your", "National Insurance number or credit card details." ) )text_area_Input( "taId", "Can you provide more detail?", paste( "Do not include personal or financial information, like your", "National Insurance number or credit card details." ) )
This function create a text input.
text_Input( inputId, label, hint_label = NULL, type = "text", width = NULL, error = FALSE, error_message = NULL, prefix = NULL, suffix = NULL )text_Input( inputId, label, hint_label = NULL, type = "text", width = NULL, error = FALSE, error_message = NULL, prefix = NULL, suffix = NULL )
inputId |
The input slot that will be used to access the value |
label |
Display label for the control, or |
hint_label |
Display hint label for the control, or |
type |
Type of text input to accept. Defaults to text |
width |
control the size of the box based on number of characters required. Options are 30, 20, 10, 5, 4, 3, 2. NULL will not limit the size |
error |
Whenever to include error handling. Defaults to FALSE |
error_message |
Message to display on error. Defaults to NULL |
prefix |
Add a prefix to the box. Defaults to NULL |
suffix |
Add a suffix to the box. Defaults to NULL |
a text input HTML shiny tag object
Other Govstyle text types:
date_Input(),
gov_list(),
heading_text(),
input_field(),
text_area_Input(),
word_count()
ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout( size = "two-thirds", # Simple text box shinyGovstyle::text_Input(inputId = "eventId", label = "Event Name"), # Error text box shinyGovstyle::text_Input( inputId = "eventId2", label = "Event Name", hint_label = "This can be found on the letter", error = TRUE ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of eventId2 observeEvent(input$submit, { if (input$eventId2 != "") { shinyGovstyle::error_off(inputId = "eventId2") } else { shinyGovstyle::error_on( inputId = "eventId2", error_message = "Please complete" ) } }) } if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( # Required for error handling function shinyjs::useShinyjs(), shinyGovstyle::header( org_name = "Example", service_name = "User Examples", logo = "shinyGovstyle/images/moj_logo.png" ), shinyGovstyle::banner( inputId = "banner", type = "beta", 'This is a new service' ), shinyGovstyle::gov_layout( size = "two-thirds", # Simple text box shinyGovstyle::text_Input(inputId = "eventId", label = "Event Name"), # Error text box shinyGovstyle::text_Input( inputId = "eventId2", label = "Event Name", hint_label = "This can be found on the letter", error = TRUE ), # Button to trigger error shinyGovstyle::button_Input(inputId = "submit", label = "Submit") ), shinyGovstyle::footer(full = TRUE) ) server <- function(input, output, session) { # Trigger error on blank submit of eventId2 observeEvent(input$submit, { if (input$eventId2 != "") { shinyGovstyle::error_off(inputId = "eventId2") } else { shinyGovstyle::error_on( inputId = "eventId2", error_message = "Please complete" ) } }) } if (interactive()) shinyApp(ui = ui, server = server)
Simple example dataset containing transport data, used to demonstrate various table styles in the example app.
transport_datatransport_data
A data frame with 10 rows and 5 variables:
The month the data belongs to
The colour of the vehicle
Cost of bikes
Cost of vans
Cost of buses
Random data generated for the shinyGovstyle package
Smaller example dataset containing transport data, used to demonstrate various table styles in the example app.
transport_data_smalltransport_data_small
A data frame with 3 rows and 3 variables:
The month the data belongs to
Cost of bikes
Cost of cars
Random data generated for the shinyGovstyle package
This function generates a value text box with an optional description and customisable colour.
value_box(value = "your value goes here", text = NA, colour = "blue")value_box(value = "your value goes here", text = NA, colour = "blue")
value |
Character. The primary value to display in the value box. Defaults to "your value goes here" |
text |
Character or NA. An optional description to appear below the value. If not provided (default is NA), the description will not be displayed |
colour |
Character. A colour to apply to the value box. Defaults to "blue". Choose from the following: "grey", "purple", "teal", "blue", "yellow", "orange", "red", "magenta", or "green" |
The text box can be used in Shiny applications to display highlighted information, such as statistics or key metrics.
A Shiny div tag representing the value box, styled according
to the specified parameters
Other Govstyle feedback types:
details(),
gov_summary(),
insert_text(),
label_hint(),
noti_banner(),
panel_output(),
tag_Input(),
warning_text()
value_box( value = "1,000,000", text = "This is the latest value for the selected inputs.", colour = "purple" )value_box( value = "1,000,000", text = "This is the latest value for the selected inputs.", colour = "purple" )
This function create warning text.
warning_text(inputId, text)warning_text(inputId, text)
inputId |
The input slot that will be used to access the value |
text |
Text that goes in the main. Accepts a plain character string,
or |
a warning box HTML shiny tag object
Other Govstyle feedback types:
details(),
gov_summary(),
insert_text(),
label_hint(),
noti_banner(),
panel_output(),
tag_Input(),
value_box()
shinyGovstyle::warning_text( inputId = "warn1", text = "You can be fined up to £5,000 if you do not register." )shinyGovstyle::warning_text( inputId = "warn1", text = "You can be fined up to £5,000 if you do not register." )
This function create tracks the word count and should be used with the text area function.
word_count(inputId, input, word_limit = NULL)word_count(inputId, input, word_limit = NULL)
inputId |
The input slot of the text area that you want to affect |
input |
The text input that is associated with the box |
word_limit |
Change the word limit if needed. Default will keep as what was used in text area component |
no value returned. Updates the word count in a shiny app
Other Govstyle text types:
date_Input(),
gov_list(),
heading_text(),
input_field(),
text_Input(),
text_area_Input()
ui <- shiny::fluidPage( shinyjs::useShinyjs(), shinyGovstyle::header( "Justice", "", logo = "shinyGovstyle/images/moj_logo.png" ), gov_layout( size = "full", text_area_Input( inputId = "text_area", label = "Can you provide more detail?", hint_label = paste( "Do not include personal or financial information,", "like your National Insurance number or credit card details." ), word_limit = 300 ) ), footer(TRUE) ) server <- function(input, output, session) { shiny::observeEvent(input$text_area, word_count( inputId = "text_area", input = input$text_area ) ) } if (interactive()) shinyApp(ui = ui, server = server)ui <- shiny::fluidPage( shinyjs::useShinyjs(), shinyGovstyle::header( "Justice", "", logo = "shinyGovstyle/images/moj_logo.png" ), gov_layout( size = "full", text_area_Input( inputId = "text_area", label = "Can you provide more detail?", hint_label = paste( "Do not include personal or financial information,", "like your National Insurance number or credit card details." ), word_limit = 300 ) ), footer(TRUE) ) server <- function(input, output, session) { shiny::observeEvent(input$text_area, word_count( inputId = "text_area", input = input$text_area ) ) } if (interactive()) shinyApp(ui = ui, server = server)