Form inputs

Form inputs are a new reactive input. Form inputs are an alternative to shiny's submit buttons. A form input is comprised of any number of inputs. The value of these inputs will not change until a form submit button within the form input is clicked. A form input's reactive value depends on the clicked form submit button. This allows you to distinguish between different form submission types, think "login" versus "register".

A form submit button, formSubmit(), is a special type of button used to control form input submission. A form input and its child reactive inputs will never update if a form submit button is not included in ... passed to formInput().

formInput(id, ..., inline = FALSE)

formSubmit(label, value = label, ...)

updateFormInput(id, submit = FALSE, session = getDefaultReactiveDomain())

Arguments

id	A character string specifying the id of the reactive input.
...	Any number of unnamed arguments passed as child elements to the parent form element or named arguments passed as HTML attributes to the parent element. At least one formSubmit() must be included.
inline	One of TRUE or FALSE, if TRUE the form and its child elements are rendered in a horizontal row, defaults to FALSE. On small viewports, think mobile device, inline intentionally has no effect and the form will span multiple lines.
label	A character string specifying the label of the form submit button.
value	A character string specifying the value of the form submit button and the value of the form input when the button is clicked, defaults to label.
submit	One of TRUE or FALSE or a character string specifying whether to trigger a form submission, defaults to FALSE. If a character string, the form is submitted and the reactive value passed is the character string specified.
session	A reactive context, defaults to getDefaultReactiveDomain().

Details

When inline is TRUE you may want to adjust the right margin of each child element for viewports larger than mobile, margin(<TAG>, right = c(sm = 2)), see margin(). You only need to apply extra space for larger viewports because inline forms do not take effect on small viewports.

Use updateFormInput() to submit a form input. This will cause all the form's child inputs to update.

Frozen inputs with scope

ui <- container(
  formInput(
    id = "login",
    formGroup(
      label = "Username",
      textInput(
        id = "user"
      )
    ),
    formGroup(
      label = "Password",
      textInput(
        type = "password",
        id = "pass"
      )
    ),
    formSubmit(
      label = "Login",
      value = "login"
    )
  )
)

server <- function(input, output) {
  # Will not react until the form submit button is
  # clicked.
  observe({
    print(input$email)
    print(input$password)
  })
}

shinyApp(ui, server)

See also

Other inputs: buttonGroupInput(), buttonInput(), checkbarInput(), checkboxInput(), chipInput(), fileInput(), listGroupInput(), menuInput(), navInput(), radioInput(), radiobarInput(), rangeInput(), selectInput(), textInput()

Examples

### A simple form

card(
  header = "Please pick a flavor",
  formInput(
    id = "form1",
    formGroup(
      label = "Ice creams",
      radioInput(
        id = "flavor",
        choices = c("Mint", "Moose tracks", "Marble"),
      )
    ),
    formSubmit("Make choice", "choice") %>%
      background("teal")
  )
) %>%
  border("teal") %>%
  width(50)
#> <div class="card border border-teal w-50">
#>   <div class="card-header">Please pick a flavor</div>
#>   <div class="card-body">
#>     <form class="yonder-form" id="form1">
#>       <div class="form-group">
#>         <label>Ice creams</label>
#>         <div class="yonder-radio" id="flavor">
#>           <div class="custom-control custom-radio">
#>             <input class="custom-control-input" type="radio" id="radio-300-957" name="flavor" value="Mint" checked autocomplete="off"/>
#>             <label class="custom-control-label" for="radio-300-957">Mint</label>
#>           </div>
#>           <div class="custom-control custom-radio">
#>             <input class="custom-control-input" type="radio" id="radio-546-70" name="flavor" value="Moose tracks" autocomplete="off"/>
#>             <label class="custom-control-label" for="radio-546-70">Moose tracks</label>
#>           </div>
#>           <div class="custom-control custom-radio">
#>             <input class="custom-control-input" type="radio" id="radio-447-260" name="flavor" value="Marble" autocomplete="off"/>
#>             <label class="custom-control-label" for="radio-447-260">Marble</label>
#>             <div class="valid-feedback"></div>
#>             <div class="invalid-feedback"></div>
#>           </div>
#>         </div>
#>       </div>
#>       <button class="yonder-form-submit btn btn-teal" value="choice">Make choice</button>
#>     </form>
#>   </div>
#> </div>