Input color Html Component in Dash

Dash Python
1

Hello!

I’m looking for this component in Dash.

image
image988×415 36.1 KB

I know color picker but I need that it little square, unless I suppose that I’ll create the component by my self.

Thank you!!!

2

Hi @isaamarod

Unfortunately, in Dash, type=color is not valid in dcc.Input

But good news – It’s available in Dash Bootstrap Components!

see: https://dash-bootstrap-components.opensource.faculty.ai/
and: Form - dbc docs

Here is an example. It’s pretty cool - I didn’t know the html input had a color picker functionality.

 
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        html.P("Choose your monster's colors"),
        dbc.FormGroup(
            [
                dbc.Input(
                    type="color",
                    id="head",
                    name="head",
                    value="#e66465",
                    style={"width": 75},
                ),
                dbc.Label("Head", html_for="head", className="m-1"),
            ],
            row=True,
        ),
        dbc.FormGroup(
            [
                dbc.Input(
                    type="color",
                    id="body",
                    name="body",
                    value="#f6b73c",
                    style={"width": 75},
                ),
                dbc.Label("Body", html_for="body", className="m-1"),
            ],
            row=True,
        ),
    ]
)

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

monsters.gif

2 Likes
3

Thank you @AnnMarieW :grinning:

If someone enter here and have the same problem but prefer to use buttons (for any reason) can contact with me I resolved using buttons too but input color a easilier and faster!!!