rstudio/shiny

checkboxGroupInput feature Request : add class for custom display with CSS

Opened this issue · 2 comments

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 :)

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

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