dcc.RadioItems and label style

[tcbegley]

You can achieve this with some custom CSS, I’m not aware of a way of doing this only in Python.

Here’s an example I came up with.

.
├── app.py
└── assets
    └── style.css

# app.py
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(
    dcc.RadioItems(
        options=[
            {"label": "Option 1", "value": 1},
            {"label": "Option 2", "value": 2},
            {"label": "Option 3", "value": 3},
            {"label": "Option 4", "value": 4},
            {"label": "Option 5", "value": 5},
            {"label": "Option 6", "value": 6},
            {"label": "Option 7", "value": 7},
        ]
    ),
    id="radioitems",
    style={"padding": "10px", "max-width": "800px", "margin": "auto"},
)

if __name__ == "__main__":
    app.run_server(debug=True)

with the following CSS in my “assets” folder

/* style.css */
#radioitems label:nth-child(4) {
  color: red;
  flex: 1;
}

#radioitems label:nth-child(5) {
  color: blue;
  flex: 2;
}

#radioitems > div {
  display: flex;
}

Which gives me this: