Input labels, help text, and formatting to inputs

Form groups are a way of labeling an input. Form rows are similar to columns()s, but include additional styles intended for forms. The flexibility provided by form rows and groups means you can confidently develop shiny applications for devices and screens of varying sizes.

formGroup(label, input, ..., help = NULL, width = NULL)

formRow(...)

Arguments

label	A character string specifying a label for the input or NULL in which case a label is not added.
input	A tag element specifying the input to label.
...	For formGroup, additional named arguments passed as HTML attributes to the parent element. For formRow, any number of formGroups or additional named arguments passed as HTML attributes to the parent element.
help	A character string specifying help text for the input, defaults to NULL, in which case help text is not added.
width	A responsive argument. One of 1:12, "content", or "equal" specifying a column width for the form group, defaults to NULL.

Examples

### Grid layout forms

# Use responsive arguments to adjust form layouts based on viewport size.
# Be sure to adjust the size of your browser window between large and small.

card(
  formRow(
    formGroup(
      width = c(md = 6),  # <-
      label = "Username",
      textInput(
        id = "user"
      )
    ),
    formGroup(
      width = c(md = 6),  # <-
      label = "Password",
      textInput(
        type = "password",
        id = "pass"
      )
    )
  ),
  formGroup(
    label = "Username",
    groupTextInput(
      id = "username",
      left = "@"
    )
  ),
  buttonInput(
    id = "go",
    label = "Go!"
  ) %>%
    background("blue")
) %>%
  margin(3) %>%
  background("grey")
#> <div class="card m-3 bg-grey">
#>   <div class="card-body">
#>     <div class="form-row">
#>       <div class="form-group col-md-6">
#>         <label>Username</label>
#>         <div class="yonder-textual" id="user">
#>           <input class="form-control" type="text" autocomplete="off"/>
#>           <div class="valid-feedback"></div>
#>           <div class="invalid-feedback"></div>
#>         </div>
#>       </div>
#>       <div class="form-group col-md-6">
#>         <label>Password</label>
#>         <div class="yonder-textual" id="pass">
#>           <input class="form-control" type="password" autocomplete="off"/>
#>           <div class="valid-feedback"></div>
#>           <div class="invalid-feedback"></div>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="form-group">
#>       <label>Username</label>
#>       <div class="yonder-group-text input-group" id="username">
#>         <div class="input-group-prepend">
#>           <span class="input-group-text">@</span>
#>         </div>
#>         <input type="text" class="form-control" autocomplete="off"/>
#>         <div class="valid-feedback"></div>
#>         <div class="invalid-feedback"></div>
#>       </div>
#>     </div>
#>     <button class="yonder-button btn btn-blue" type="button" role="button" id="go" autocomplete="off">Go!</button>
#>   </div>
#> </div>