Practical examples

• Let’s compare a common HTML structure for select inputs, to what Shiny provides us with:

  <div>
    <label id="variable-label" for="variable">Variable:</label>
    <select id="variable" class="some-class">
      <option value="cyl" selected>Cylinders</option>
      <option value="gear">Gears</option>
    </select>
  </div>

  shinySelect <- shiny::selectInput(
    inputId = "selectId",
    label = "Choose",
    choices = 1:2,
    selected = 1
  )
  shinySelect

  <div class="form-group shiny-input-container">
    <label class="control-label" id="selectId-label" for="selectId">Choose</label>
    <div>
      <select id="selectId" class="shiny-input-select"><option value="1" selected>1</option>
  <option value="2">2</option></select>
      <script type="application/json" data-for="selectId" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
    </div>
  </div>

• Let’s match the HTML structure for both:

  # Remove class of container
  shinySelect$attribs$class <- NULL
  
  # Remove label element's class
  shinySelect$
    children[[1]]$
    attribs$class <- NULL
  
  # Remove extra div container for <select>
  shinySelect$children[[2]] <- 
    shinySelect$
      children[[2]]$
      children
  
  shinySelect

  <div>
    <label id="selectId-label" for="selectId">Choose</label>
    <select id="selectId" class="shiny-input-select"><option value="1" selected>1</option>
  <option value="2">2</option></select>
    <script type="application/json" data-for="selectId" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
  </div>