checkboxGroupInput feature Request : add class for custom display with CSS

[yoelii]

Hi,

It could be fine if we can add easily a class attribute for custom style with CSS. A class attribute can be added for the input element and the span child element

checkboxGroupInput(
                                   inputId = "variable", 
                                   label = "Variable:",
                                   choices =   c("Cylinders" = "cyl",
                                                        "Transmission" = "am",
                                                         "Gears" = "gear"), 
                                   classInput = "my-class-input", 
                                   classSpan = "my-class-span")

<div id="variable" class="control-group shiny-input-checkboxgroup">
  <label class="control-label" for="variable">Variable:</label>
  <label class="checkbox">
    <input class= "my-class-input", type="checkbox" name="variable" id="variable1" value="cyl"/>
    <span class = "my-class-span">Cylinders</span>
  </label>
  <label class="checkbox">
    <input class= "my-class-input" type="checkbox" name="variable" id="variable2" value="am"/>
    <span class = "my-class-span">Transmission</span>
  </label>
  <label class="checkbox">
    <input class= "my-class-input" type="checkbox" name="variable" id="variable3" value="gear"/>
    <span class = "my-class-span" >Gears</span>
  </label>
</div> 

With the class it could be easy to style the element with CSS directly with the class name and not by creating a selector like:

#variable > div > div > label {
      .......
 }


#variable > div > div > label > input[type="checkbox"] {
  .......
}
#variable > div > div > label > input[type="checkbox"]:checked + * {
  ......
}

#variable  > div > div > label > span {
......
}

Thank :)

[yoelii]

It could be also usefull for other elements radioInput, fileInput, ..

[yoelii]

Another way, more easier, it's to use tagQuery() function from htmltools package This function permits to add class in element.

Simple example :

library(shiny)
library(htmltools)

ui <- fluidPage(
  uiOutput("dynamicCheckbox") # This will display the checkboxGroupInput
)

server <- function(input, output, session) {
  output$dynamicCheckbox <- renderUI({
    # Create the checkboxGroupInput
    checkbox_group <- checkboxGroupInput(
      inputId = "myCheckboxGroup",
      label = "Choose options:",
      choices = c("Option 1" = "opt1", "Option 2" = "opt2", "Option 3" = "opt3")
    )
    
    # Use tagQuery to modify the checkboxGroupInput
     modified_checkbox_group <- tagQuery(checkbox_group)$find("input")$addClass("my-custom-class")$allTags() # Convert back to tags
    
    # Return the modified checkboxGroupInput for rendering
    modified_checkbox_group
    
  })
}
shinyApp(ui, server)

Other possible syntax :

# Use tagQuery to modify the checkboxGroupInput
     modified_checkbox_group <- tagQuery(checkbox_group)$
           find("input")$ # find the element input
           addClass("my-custom-class")$ # Convert add class to input element
           allTags() # Convert back to tags

    # Return the modified checkboxGroupInput for rendering
    modified_checkbox_group