R Shiny add separator into radio button list choices

Question

i've this kind of radio button :

             radioButtons("test", "test:",
                          c("def" = "def",
                          "ghi" = "ghi",
                            "jkl" = "jkl")

But i would like to add a separator like tag$hrto separate def from the others. I tried to make two list like this :

radioButtons("test", "test:",
c("def" = "def"),
tag$hr ,
radioButtons("test", "test:",
c("ghi" = "ghi",
"jkl" = "jkl")

but it doesn't work.

thanks !

Answer 1

In my experience with Shiny app development I have found the "Inspect Source" function of modern browsers incredibly powerful. It lets you see the HTML/CSS/JS behind websites and then you can use that to model your work off. Shiny lets you insert HTML/CSS directly into your app. By running the radioButtons command you supplied, then using that developer feature of Chrome, I was able to see the exact HTML that built the radiobuttons. Then you can insert an hr directly between your options. I also added a new hr class called radio in the head because by default the hr has a bit of padding around it and is a very similar grey to the input box. You also might want to be able to use a regular hr elsewhere in the app.

There might be a simpler way to do this that someone who is a bit more of a HTML/CSS pro could speak to. Hope this helps.

library(shiny)


ui <- fluidPage(
     tags$head(
          tags$style(HTML(
               "hr.radio {
                    border: 0;
                    border-top: 1px solid #8c8b8b;
                    padding-top: 1;
               }"
          ))
     ),


   titlePanel("New Radio Button Style"),


   sidebarLayout(
      sidebarPanel(HTML("
<div id='test' class='form-group shiny-input-radiogroup shiny-input-container shiny-bound-input'>
     <label class='control-label' for='test'>test</label>
<div class='shiny-options-group'>
     <div class='radio'>
          <label>
               <input type='radio' name='test' value='one' checked='checked'>
               <span>one</span>
          </label>
     </div>
     <hr class ='radio'>
     <div class='radio'>
          <label>
               <input type='radio' name='test' value='two'>
               <span>two</span>
          </label>
     </div>
     <hr class = 'radio'>
     <div class='radio'>
          <label>
               <input type='radio' name='test' value='three'>
               <span>three</span>
          </label>
     </div>
</div>
</div>")

      ),

      # You can see the input$test is still reacting with the radiobuttons
      mainPanel(
         textOutput("selection")
      )
   )
)


server <- function(input, output) {

   output$selection <- renderText({
      input$test
   })
}


shinyApp(ui = ui, server = server)

Answer 2

Here is JavaScript/jQuery solution. It finds the div element that contains the def radio button, and insert an <hr> after that.

radioButtons("test", "test:",
             c("def" = "def",
               "ghi" = "ghi",
               "jkl" = "jkl")),
tags$head(tags$script(HTML("
                           $(document).ready(function(e) {
                              $('input[value=\"def\"]').parent().parent().after('<hr>');
                           })
                           ")))