Customising controls with HTML, JavaScript, SVG, etc

shiny
1

Hello everybody,

Thanks to the R Studio for their great work!

I would like to add some HTML or JavaScript or even SVG code into some Shiny controls (in my case checkboxGroupInput and selectInput / selectizeInput).

For instance I would like to add directly before (or in front of - I mean, on the same line) each option / item of the previous controls e.g. a straight colored line or a colored circle (small), etc. My intention is indeed to replace the legend of the graph generated by the R server code.

Do you see any possibility to do that?
I'm aware some HTML tags are available directly in R. But I didn't manage to achieve what I want.
I also noticed that selectizeInput extends the possibilities to include JavaScript bits but that's only for this control, not for check boxes.

I would be grateful if someone could help me.

2

If this is stuff you want to add is purely aesthetic (like adding bullets to your dropdown items), maybe you could add CSS to your Shiny app? If you're building the UI with R, you can add the theme argument to fluidPage to specify a CSS stylesheet. Then you just need to know the classes or IDs of the controls you want to target and style them the same way you would regular HTML :slightly_smiling_face:

3

Thanks, rensa, for this CSS solution.

My goal is not really purely aesthetic: it's rather combining the options of a control with the legend of a graph.

I think the best (i.e. most versatile) solution would be to use SVG.

1 Like