HTML Code for RadioItems labels

Dash Python
1

I would like to do this as well. Would it be possible to have the label contain either raw html or dash_html_components code, ideally something like this with. Changing subitem_lsit to dcc.Dropdown also did not work

import dash
import dash_core_components as dcc
import dash_html_components as html
from plotly import graph_objs as go
from dash.dependencies import Input, Output

test_dash_app = dash.Dash(__name__, url_base_pathname='/', csrf_protect=False)
test_dash_app.layout = html.Div([dcc.RadioItems(id='item_list', 
                                                options = [dict(label = k, value = k) for k in ['Hey', 'Bob']]), 
                                 dcc.RadioItems(id='subitem_list')])
@test_dash_app.callback(
    Output(component_id='subitem_list', component_property='options'),
    [Input(component_id='item_list', component_property='value')]
)
def update_sub_list(selected_idx):
    return [{'label': html.Img(src = 'https://dummyimage.com/%i.jpg' % (100+i)), 'value': i} for i, lab_name in enumerate('abcde')]
2

What is it you want to do?

3

The idea here would be to have custom images for each item in the selectable list (rather than just plain text, so a picture of an apple instead of a radio button labeled apple), but having the flexibility for arbitrary HTML code would make tasks like having selectable rows in a table possible.

4

Yeah, this is a great idea. This is also related to Dash DataTable - Conditional Formatting and https://github.com/plotly/dash/issues/36#issuecomment-329702841.

I’d like to modify dash-renderer to allow any attribute in a component take a component as a value, similar to how children works right now (html.Div(children=html.H1(children='Header'))).

This will enable some powerful stuff but it will be a lot of work to do right. If anyone / any company has the resources to sponsor this work, please reach out to our team.

5

Hi Chris, is there an update on this issue? Having html code (e.g. a url) in radio items would be really useful.

6

Any Update on this issue?

Currently a snippet like the following:

dcc.RadioItems(id='id1', options=[
                    {'label': 'label1', 'value': '1'},
                    {'label': 'label2', 'value': '2'}], 
                    value='1'
                    ),

will render something like the following in html:

<div class="container">
          <label>
            <input type="radio" name="group1" />
            "label1"
          </label>
          <label>
            <input type="radio" name="group1" />
            "label2"
          </label>
      </div>

Due to the string symbol it is impossible to inject new html tags inside. I tried something like:

f"{html.Span("label1")} and <span>label1<span/>, none of which works.

Basically I ran into this problem when trying to incorporate some css file into dcc.RadioItems. Mostly the radio items in html files are structured as follows:

<form action="#">
          <label>
            <input type="radio" name="group1" />
            <span>Red</span>
          </label>
          <label>
            <input type="radio" name="group1" />
            <span>Cad</span>
          </label>
</form>

Unfortunately in our case the radio item tags are not wrapped around span, so to apply direct CSS selector to the label would be difficult.

I am also wondering if there is any nice way to work around this?

7

Hi there, I’m facing the same issues, I want to provide my user with image options that they can choose rather than plain string. Is there any update on this problem?

8

Same thing here: would like to be able to supply an image (or an image AND some text) as the label to a radio button.