dcc.Input() doesn't accept "type='checkbox'" argument

Dash Python
1

Hi. I went online to a CSS generator to make a custom toggle switch, and I’m trying to figure out how to implement it in Dash.

I have saved the CSS file in the assets directory, and it seems to be recognizing the CSS files just fine, I just can’t figure out how to use it correctly in Dash.

Here’s the CSS file:

.onoffswitch {
	position: relative; width: 99px;
	-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.onoffswitch-label {
	display: block; overflow: hidden; cursor: pointer;
	border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
	display: block; width: 200%; margin-left: -100%;
	transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
	display: block; float: left; width: 50%; height: 41px; padding: 0; line-height: 41px;
	font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
	box-sizing: border-box;
}
.onoffswitch-inner:before {
	content: "ON";
	padding-left: 10px;
	background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
	content: "OFF";
	padding-right: 10px;
	background-color: #EEEEEE; color: #999999;
	text-align: right;
}
.onoffswitch-switch {
	display: block; width: 44px; margin: -1.5px;
	background: #FFFFFF;
	position: absolute; top: 0; bottom: 0;
	right: 54px;
	border: 2px solid #999999; border-radius: 20px;
	transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
	margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	right: 0px; 
}

Here’s the corresponding HTML:

    <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" checked>
        <label class="onoffswitch-label" for="myonoffswitch">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div>

And lastly, here’s what I’m attempting to do to get it to work:

#!/usr/bin/env python3

import dash
from dash.dependencies import Output, Input, State
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY], suppress_callback_exceptions=True)


toggle_sw = html.Div(
	className='onoffswitch',
	children=[
		dcc.Input(
			className='onoffswitch-checkbox',
			name='onoffswitch',
			id='myonoffswitch',
			type='checkbox'
			),
			html.Label(
				className='onoffswitch-label',
				htmlFor='myonoffswitch',
				children=[
					html.Span(
						className='onoffswitch-inner'
					),
					html.Span(
						className='onoffswitch-switch'
					)
				]
			)
		]
	)
app.layout = html.Div(
    children=[
        html.Div(
            [
				html.H3('A switch should be here...'),
				toggle_sw
            ]
        )
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True, host='0.0.0.0')

I’m not new to Python, but I’m very new to HTML/CSS and webdev in general. As you can see, I tried to mimic the HTML in Dash, but not sure if that’s even the correct way to do it.

So in the documentation for an html.Input() it says:
" list ( string ; optional): Identifies a list of pre-defined options to suggest to the user. The value must be the id of a element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the type attribute’s value is hidden, checkbox, radio, file, or a button type." (emphasis on checkbox)

But the “type” argument doesn’t accept “checkbox” as a type.

Also, the HTML specifies “checked” for the input, but I don’t know where that’s supposed to go either.

The toggle switch shows up, but doesn’t actually “toggle” because I can’t change the “type” to “checkbox”. When I inspect element and change the “type” to “checkbox” then it works fine. It seems the issue is either not being able to type an input as “checkbox” or I’m missing the correct way to do this.

Can anyone tell me what I’m doing wrong here? Thanks in advance.