Initialize a Shiny input as disabled

Create a Shiny input that is disabled when the Shiny app starts. The input can be enabled later with shinyjs::toggleState or shinyjs::enable.

disabled(...)

Arguments

...	Shiny input (or tagList or list of of tags that include inputs) to disable.

Value

The tag (or tags) that was given as an argument in a disabled state.

Note

shinyjs must be initialized with a call to useShinyjs() in the app's ui.

See also

useShinyjs, toggleState, enable, disable

Examples

if (interactive()) {
  library(shiny)
  shinyApp(
    ui = fluidPage(
      useShinyjs(),  # Set up shinyjs
      actionButton("btn", "Click me"),
      disabled(
        textInput("element", NULL, "I was born disabled")
      )
    ),
    server = function(input, output) {
      observeEvent(input$btn, {
        enable("element")
      })
    }
  )
}

library(shiny)
#> 
#> Attaching package: ‘shiny’
#> The following object is masked from ‘package:shinyjs’:
#> 
#>     runExample
disabled(numericInput("num", NULL, 5), dateInput("date", NULL))
#> [[1]]
#> <div class="form-group shiny-input-container shinyjs-disabled">
#>   <label class="control-label shiny-label-null" for="num"></label>
#>   <input id="num" type="number" class="form-control" value="5"/>
#> </div>
#> 
#> [[2]]
#> <div class="shiny-date-input form-group shiny-input-container shinyjs-disabled" id="date">
#>   <label class="control-label shiny-label-null" for="date"></label>
#>   <input type="text" class="form-control" data-date-language="en" data-date-week-start="0" data-date-format="yyyy-mm-dd" data-date-start-view="month" data-date-autoclose="true" data-date-dates-disabled="null" data-date-days-of-week-disabled="null"/>
#> </div>
#>