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

Question

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.

Or with the `options` argument of `selectizeInput` - see [here](https://github.com/rstudio/shiny/issues/1506#issuecomment-334743611) — Stéphane Laurent, Sep 14 '22 at 12:32

score 2 · Accepted Answer · answered Sep 14 '22 at 12:52

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)

ismirsehregal · Answer 2 · 2022-09-14T12:57:38.240

As shown in this article we can use updateSelectizeInput to use custom HTML for the choices parameter:

library(shiny)

ui <- fluidPage(withMathJax(),
                selectizeInput(
                  inputId = "id",
                  label = "Choice",
                  choices = NULL
                ))

server <- function(input, output, session) {
  updateSelectizeInput(
    session,
    inputId = "id",
    choices = c(
      h2o = "H<sub>2</sub>O",
      co2 = "CO<sub>2 </sub>",
      NH4Plus = "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 = FALSE
  )
}

shinyApp(ui, server)

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

2 Answers2