Is there a way to display HTML inside a selectInput in an R shiny app

September 14, 2022

Is there a way to display HTML tags such as Cu<sup>2+</sup> displaying as "Cu²⁺" inside a selectInput option in an R shiny app ? I would like to display chemical formulae for instance:

library(shiny)

ui <- fluidPage(
  withMathJax(),
  selectInput(
    inputId = "id",
    label = "Choice",
    choices = c('H<sub>2</sub> O', 'CO<sub>2 </sub>','NH<sub>4 </sub><sup>+<\sup>')
  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

I have already tried MathJax which works but considerably slows down the application and KaTeX which is faster but only works in a browser. I think HTML would be the most efficient way.

>Solution :

Its possible to set it up all in the ui like so :


library(shiny)
ui <- fluidPage(
  selectizeInput("myinput",
                 label="choose",
                 choices = c(r'(H<sub>2</sub> O)',
                             r'(CO<sub>2 </sub>)',
                             r'(NH<sub>4 </sub><sup>+</sup>)'),
  options = list(render = I(
    '{
    item: function(item, escape) {
      return "<div>" + item.value + "</div>";
    },
    option: function(item, escape) {
      return "<div>" + item.value + "</div>";
    }
  }')))
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)