HTML labels in input_select

[fabiocomazzi]

Hi,

I would like to create HTML label in my ui.input_select. Currently I'm trying something like this:

from shiny.express import input, render, ui

entity_choices= {
    'DE': ui.tags.div(
        ui.tags.img(src='https://flagcdn.com/w20/de.png', style='margin-right: 10px;'),
        'Germany (DE)',
        style='display: flex; align-items: center;'
    ),
    'FR': ui.tags.div(
        ui.tags.img(src='https://flagcdn.com/w20/fr.png', style='margin-right: 10px;'),
        'France (FR)',
        style='display: flex; align-items: center;'
    )
}

ui.input_select(
    "input",
    "Entity",
    choices=entity_choices,
    selected="DE"
) 

This doesn't seems to work as the image is not displayed.

P.S: I'm not an expert in HTML, sorry in advance!

[keithn]

For country flags could you just use emoji

from shiny.express import input, render, ui

ui.input_select(
    "input",
    "Entity",
    choices={'DE': '🇩🇪 Germany (DE)', 'FR': '🇫🇷 France (FR)'},
    selected="DE"
)

Example app on Shiny editor

[fabiocomazzi]

Hi keithn, your solution doesn't work for me. Maybe there is a way to explicitly mention the encoding so that it can read the emoji?

reading from input_select docs:
choices: SelectChoicesArg

Either a list of choices or a dictionary mapping choice values to labels. Note that if a dictionary is provided, the keys are used as the (input) values so that the dictionary values can hold HTML labels. A dictionary of dictionaries is also supported, and in that case, the top-level keys are treated as <optgroup> labels.

So we should be able to render HTML.