How can I make a line break in the label of a pretty radio button?

Question

I'm building a web platform with shiny in R Studio. I got stucked with setting line break in radio button choices because I need to put long choice names with method names. Here is the example code.

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tabItem(tabName = "CF", br(),
          sidebarLayout(
            sidebarPanel(width = 3,
                         uiOutput("example")),
            mainPanel(width = 9,
                      fluidPage(width = NULL,
                                uiOutput("display"))
            )))
)

server <- function(input, output) {
  choice_dic <- c("Option 1 name<br> (option 1 method name)" = "1",
                  "Option 2 name<br> (option 2 method name)" = "2")
  output$example <- renderUI({
    tagList(
      prettyRadioButtons(inputId = "cf_method",
                         label = h4(strong("Method", style = "color:black")),
                         icon = icon("check"), animation = "jelly",
                         choices = choice_dic, selected = "1")
    )
  })

  observe({
    print(input$cf_method)
  })
}

# Run the application
shinyApp(ui = ui, server = server)

The sidebarPanel and mainPanel have fixed width 3 and 9, respectively. First, I put br tag inside the choices, but it didn't work. Then I got the idea from here that I have to put some tags like tags$style or tags$script, but I have no idea because I have little background of CSS and HTML. Can anyone help?

Answer 1

Similarly to your linked example, you could do it like this.

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
    tabItem(tabName = "CF", br(),
            sidebarLayout(
                sidebarPanel(width = 3,
                             uiOutput("example")),
                mainPanel(width = 9,
                          fluidPage(width = NULL,
                                    uiOutput("display"))
                )))
)

server <- function(input, output) {
    choice_dic <- c("Option 1 name<br> (option 1 method name)" = "1",
                    "Option 2 name<br> (option 2 method name)" = "2")
    output$example <- renderUI({
        tagList(
            prettyRadioButtons(inputId = "cf_method",
                               label = h4(strong("Method", style = "color:black")),
                               icon = icon("check"), animation = "jelly",
                               choices = choice_dic, selected = "1"),
            tags$script(
                "
                $('#cf_method .state label span').map(function(choice){
                    this.innerHTML = $(this).text();
                });
                "
            ),
            tags$style(HTML(
                "
                .pretty .state label::after, .pretty .state label::before, .icon {
                    margin-top: 20px;
                }
                
                .pretty .state label {
                    margin-left: 20px;
                }
                "
            )))
    })
    
    observe({
        print(input$cf_method)
    })
}

# Run the application
shinyApp(ui = ui, server = server)