I have been exploring different approaches to solve this problem, but I am eager to discover a more refined solution than the one I have currently formulated. The following code is essentially a revised version of http://codepen.io/geedmo/pen/kBHsI/ from the initial query. To implement this code, copy the compiled CSS into a file named style.css and place it in the "www" folder. Additionally, the modified HTML includes the necessary attributes and tags for seamless integration with Shiny.
Here is the updated code snippet:
library(shiny)
ui <- shinyUI(fluidPage(
HTML("<link rel='stylesheet' type='text/css' href='style.css'>"),
titlePanel("Checkboxgroup"),
fluidRow(
HTML(
'<div id="checkGroup" class="form-group shiny-input-checkboxgroup shiny-input-container-inline">
<div class="btn-switch btn-switch-primary form-group">
<input type="checkbox" id="input-btn-switch-primary" name="checkGroup" value="1"/>
<label for="input-btn-switch-primary" class="btn btn-round btn-primary"><em class="glyphicon glyphicon-ok"></em><strong> CLICK ME</strong></label>
</div>
<div class="btn-switch btn-switch-success form-group">
<input type="checkbox" id="input-btn-switch-success" name="checkGroup" value="2"/>
<label for="input-btn-switch-success" class="btn btn-round btn-success"><em class="glyphicon glyphicon-ok"></em><strong> CLICK ME</strong></label>
</div>
<div class="btn-switch btn-switch-info form-group">
<input type="checkbox" id="input-btn-switch-info" name="checkGroup" value="3"/>
<label for="input-btn-switch-info" class="btn btn-round btn-info"><em class="glyphicon glyphicon-ok"></em><strong> CLICK ME</strong></label>
</div>
<div class="btn-switch btn-switch-warning form-group">
<input type="checkbox" id="input-btn-switch-warning" name="checkGroup" value="4"/>
<label for="input-btn-switch-warning" class="btn btn-round btn-warning"><em class="glyphicon glyphicon-ok"></em><strong> CLICK ME</strong></label>
</div>
<div class="btn-switch btn-switch-danger form-group">
<input type="checkbox" id="input-btn-switch-danger" name="checkGroup" value="5"/>
<label for="input-btn-switch-danger" class="btn btn-round btn-danger"><em class="glyphicon glyphicon-ok"></em><strong> CLICK ME</strong></label>
</div>
</div>'
),
textOutput("selectedOptions")
)
))
server <- shinyServer(function(input, output) {
output$selectedOptions <- renderText({
paste("Selected options:", paste((input$checkGroup), collapse = " "), sep = " ")
})
})
shinyApp(ui = ui, server = server)