R Shiny: How can I format choices in a a selectInput drop box?

Question

I am building a shiny page, and I would like to give the users some control over graphical elements - colors, symbol sizes etc. I am putting in a drop box to let the user control the colors of points in a graph. I would like the names of the colors to appear in color themselves. The ui.r has:

selectInput("PColor","Choose a Color:",
choices=list(HTML('<p style="color: blue"> blue </p>'),
HTML('<p style="color: red"> red </p>'),selected="blue")

However, the HTML codes are not evaluated. Instead the dropdown choices have '<p style="color: blue"> blue </p>' and similar for red. Is there anyway I can format each of the individual choices in this list?

Thanks

Answer 1

The following solution should work for radioButtons() :

radioButtons2 <- function(inputId, label, choices, selected){
  temp.choices <- names(choices)
  n <- length(choices)
  names(temp.choices) <- paste0("ABCZYXWVU",1:n) -> temp.names
  html <- as.character(radioButtons(inputId, label, temp.choices, selected=names(temp.choices[temp.choices==selected])))
  for(i in 1:n){
    html <- sub(paste0("<span>",temp.names[i],"</span>"), as.character(choices[[i]]), html)
  }
  attr(html,"html") <- TRUE
  html
}

Note that I have reversed the role of the names in choices ; it works like this:

    choices <- list(blue=HTML('<span style="color: blue"> blue </span>'), red=HTML('<span style="color:red"> red </span>'))
> cat(as.character(
    +   radioButtons2("inputId","label",choices=choices, selected="blue")
    + ))
    <div id="inputId" class="control-group shiny-input-radiogroup">
      <label class="control-label" for="inputId">label</label>
      <label class="radio">
        <input type="radio" name="inputId" id="inputId1" value="blue" checked="checked"/>
        <span style="color: blue"> blue </span>
      </label>
      <label class="radio">
        <input type="radio" name="inputId" id="inputId2" value="red"/>
        <span style="color:red"> red </span>
      </label>
    </div>

However the similar solution for selectInput() does not work: the html code is ignored. You can try with selectInput2() :

selectInput2 <- function(inputId, label, choices, selected = NULL, multiple = FALSE){
  temp.choices <- names(choices)
  n <- length(choices)
  names(temp.choices) <- paste0("ABCZYXWVU",1:n) -> temp.names
  html <- as.character(selectInput(inputId, label, temp.choices, selected=names(temp.choices[temp.choices==selected]), multiple))
  for(i in 1:n){
    html <- sub(temp.names[i], as.character(choices[[i]]), html)
  }
  attr(html,"html") <- TRUE
  html
}
> cat(as.character(
+   selectInput2("inpuId", "label", choices, selected="blue")
+ ))
<label class="control-label" for="inpuId">label</label>
<select id="inpuId">
  <option value="blue" selected="selected"><span style="color: blue"> blue </span></option>
  <option value="red"><span style="color:red"> red </span></option>
</select>

This function works but the html code disappears in the app (as shown with "Inspect element" in the browser). If you force html code then actually the html code appears in the label of the selectInput .