In python, using the dash bootstrap checklist components ( here , using LUMEN theme), I achieved the following nice looking checklist: [Checklist]. Each option in the checklist shows the number of degrees and then between the brackets the number of datapoints that will remain if the option is select…

:tada: Just FYI - In the next release of dash-boostrap-components (v1.4.0) you will be able to include components in the labels of: dbc.RadioItems dbc.Checklist , dbc.RadioButton dbc.Checkbox dbc.Switch

Hello @Noone234 , I do not think that you can add separate components inside the label on dbc. You could however switch to dmc, and use a CheckboxGroup: [image] Dash Mantine Components - Checkbox Use Checkbox component to capture boolean input from user.

[image] jinnyzor: I do not think that you can add separate components inside the label on dbc. I can confirm that, the label is interpreted as string always. I tried using html tags, but it didn’t work out. There might be a really hacky way using css based on a SO post I saw.

I should use dmc more often, it has a lot of nice components/features! import dash_mantine_components as dmc from dash import html, Output, Input, callback import dash app = dash.Dash(__name__) app.layout = html.Div( [ dmc.CheckboxGroup( id="checkbox-group", la…

Thanks for the great response. That helps a lot. Those components look great. Can I make them match stylistically with the LUMEN bootstrap theme? I’d like the dashboard to look coherent :slight_smile:

Hi @Noone234 , I#m not entirely sure concerning the styling, but maybe @AnnMarieW could share her thoughts on this :upside_down_face:

You should be able to add “dbc” to the class name and it will apply styling of bootstrap to it. If you need more than that, you’ll need to add some custom css. Or, add the corresponding class name that dbc used with the same style item.

@Noone234 It would be cool if @jinnyzor suggestion of using the “dbc” class would work, but currently, that only applies Bootstrap themes to dash-core-components and the DataTable (More info here . ) You can apply Bootstrap classes to the labels of the dmc checkboxes - for example: …

That is fantastic! I guess the easiest thing for me to do then is to wait for that next release!

The prerelease is available if you would like to take it for a spin: pip install dash-bootstrap-components==1.4.0-rc1

Bootstrap checklist: two text colors for an option

Dash Python

AIMPED February 28, 2023, 10:00am 14

Just got released:

Topic		Replies	Views
Change color of Checklist's checkboxes Dash Python	4	3520	November 10, 2023
Checklist elements styling Dash Python	5	12021	August 2, 2019
How to change the outline color of a checklist box Dash Python	4	941	November 10, 2023
Checklist in dash core or bootstrap components Dash Python	1	2656	October 22, 2020
Python dash Mantine MultiSelect Dash Python	2	79	August 23, 2024

Bootstrap checklist: two text colors for an option

Related topics