✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Combining value and placeholder in dcc.Input field

I have a input field with a placeholder describing the input, but I also want an initial value (zero) in the output while the user sees the placeholder.

If I add a value=0 the placeholder does not show (but I want the placeholder to show in the field).

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

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([dcc.Input(id='my-input', placeholder="write a number", type="number")]),
    html.Br(),
    html.Div(id='my-output')
])

@app.callback(Output("my-output", "children"), 
              [Input("my-input", "value")])

def output_text(value):
    #0 if value == None else value
    
    return html.Div(html.H6(value))

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

S if you run the script above I want 0 to show before the user types a number.

How can I solve this?

Commenting in the line you have commented out, it works as intended?

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

app = dash.Dash(__name__)
app.layout = html.Div([
    html.Div([dcc.Input(id='my-input', placeholder="write a number", type="number")]),
    html.Br(),
    html.Div(id='my-output')
])


@app.callback(Output("my-output", "children"),
              [Input("my-input", "value")])
def output_text(value):
    value = 0 if value is None else value
    return html.Div(html.H6(value))


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