I would like to add Toggle switches to my Dash application. I have been playing around with various HTML and CSS options and have gotten as far as getting a working Toggle switch with the use of dcc.Input with type=“radio” or “checkbox”. But I am unable to use this button as it uses the html option “checked” to initialise the state of the button upon startup, which is not available in dcc.Input. I also tried using the dcc.Checklist option to make a working Toggle switch, but it also didn’t work properly. Is there any other way to get a working Toggle switch in Dash
Well, the toggle workaround using checkboxes works for me. Though I am not sure what you mean with the
part. With checklist you can just check for the list as a boolean, the value it contains does not really matter. Python allows for this syntax:
if checklistValues:
pass
If your problem is with initializing the checklist box as active, then just set the initial value to the one you defined in the options, as in
dcc.Checklist(
options=[{'someLabel': 1}],
values=[1],
)
Whatever it does though has to be defined in the python backend. Is any of this what you meant?
Could you maybe share a sample of the way you implemented this? Thanks!
Thanks a lot for the response. I have tried at-least 60-70 different ways to implement toggle switches using either pure dash components or pure css options. I didn’t try any Javascript based options though, because my experience using JS along with Dash is not very good, so I try to avoid use of JS in Dash apps.
Here is one of the HTML examples that I used (I took it from Bulma Extensions. I am using Bulma CSS for my app):
<div class="field">
<input id="switchExample" type="checkbox" name="switchExample" class="switch" checked="checked">
<label for="switchExample">Switch example</label>
</div>
I implemented the above example using both dcc.Checklist and dcc.Input. With dcc.Checklist, it just doesn’t show any toggle switch, only shows label. So I tried using dcc.input in the following way:
html.Div(className="field", children=[dcc.Input(id="switchExample", type="checkbox", className="switch"), html.Label("Switch 1", htmlFor="switchExample")])
This one shows a nice working switch, but the problem is that I am unable to assign any initial state (on or off) since there is no “checked” property available in dcc.Input().
I have implemented many such examples but none seem to be working for me. It would be very helpful if you can share the snippet of a working example.
Also, I think Dash would be benefited a lot if toggle switches are included by default in Dash Core Components.
For toggles, i usually use buttons. With buttons, you basically get the number of times it has been hit. You can then check the rest of the modulo to 2 of this number of times the button is clicked:
@app.callback(Output(......),
[Input('toggle', 'n_clicks')])
def whatever(click):
# Check if toggle on or of
click = 2 if click is None else click
toggle_on = True if click % 2 == 0 else False
if toggle_on:
pass
return ....
Would something like this help?
1 Like
Thanks for the example! Actually what I meant was a “switch” like animation when checking/clicking the button (something like this https://www.w3schools.com/howto/howto_css_switch.asp). This is mostly for aesthetics.
I’ve done it like what you suggest, with an additional callback that changes the style of the button, but it looks a little rigid since it was just a change of image with no transition. I’ve also done it with Checkboxes and the CSS :after :checked:after selectors, so that depending on whether the checkbox is checked or not I show different text, but this doesn’t work on Firefox. The main problem for me has been that the Checklist component has the label as a parent of the input and all the examples I’ve found online so far of toggle switches need the label to be a “sibling” of the input or being able to add a Span element as a child of the input, but the dcc.Checklist component does not seem to accept children.
I guess I could look into creating a React toggle switch for this, but it would be a lot easier using simple CSS.
The point here is to use toggle switches instead of buttons, checkbox, radios, or dropdown. Toggle switches are much more aesthetically pleasing and intuitive for several tasks compared to buttons. Just open your iPhone and you’ll find toggle switches all over the interface. I wonder why Dash team has not included such an important component in their library.
2 Likes
Thanks. This is exactly what I am looking for. And have tried heck lot of ways to implement this through CSS, but, could’t find a reliable solution yet. Please let me know if you come up with a working solution.
Well, they included it in the official component package which they offer as a premium feature to their customers. The whole package provides many more components more similar e.g. to LabView components.
The only way I implemented it is still as a checkbox, I couldn’t do it in a different way.
You might be able to use the previously mentioned Button idea as well, just e.g. target the style of the button as output and change it with a modulo implementation. How you’d style it to make it look nice tho would require some CSS trickery and I don’t know exactly how to do that.
Just as an update, it seems the Dash DAQ components are now MIT License, so we can use the toggle component directly 
Yes, I just checked and it does say MIT license. This is just awesome. 
another awesome thing → dash bootstrap components have ButtonGroup
came here from google looking for ‘dash toggle buttons’
These bootsrap components are amazing but took me too long to find!
This is the most relevant thread I could find. Also trying to implement freely available custom css / html components including toggle switches online. This is purely for aesthetic reasons as they make your app look much more professional and polished.
Considering this example: Card by Pradeepsaranbishnoi made with CSS | Uiverse.io
The css can be easily copied into the assets folder of your app. However the html must be replicated using Dash html to my understanding which becomes a grey area because dash html does not have the full functionality as native html. It’s then a guessing game how to implement it (if it’s possible at all). Dash Daq switch does also not appear to work in many cases from what I can see.
<input id="switch" type="checkbox">
<div class="app">
<div class="body">
<div class="phone">
<div class="menu">
<div class="time">4:20</div>
<div class="icons">
<div class="network"></div>
<div class="battery"></div>
</div>
</div>
<div class="content">
<div class="circle">
<div class="crescent"></div>
</div>
<label for="switch">
<div class="toggle"></div>
<div class="names">
<p class="light">Light</p>
<p class="dark">Dark</p>
</div>
</label>
</div>
</div>
</div>
</div>
# Converted to dash html doesn't work i.e.,
layout = html.Div([
html.Input(id="switch", type="checkbox"),
html.Div(className="app", children=[
html.Div(className="body", children=[
html.Div(className="phone", children=[
html.Div(className="menu", children=[
html.Div(className="time", children="4:20"),
html.Div(className="icons", children=[
html.Div(className="network"),
html.Div(className="battery")
])
]),
html.Div(className="content", children=[
html.Div(className="circle", children=[
html.Div(className="crescent")
]),
html.Label(htmlFor="switch", children=[
html.Div(className="toggle"),
html.Div(className="names", children=[
html.P("Light", className="light"),
html.P("Dark", className="dark")
])
])
])
])
])
])
])
Working through the dash implementation:
- Dash html components has no html.Input so you might want to use dcc.Input
- dcc.Input but it has no type=‘checkbox’ available like native html does.
- Then you might try daq toggle switches but they do also not appear to work in this case.
Does anyone have any updates or a solution to this? Thank you