User inputs in Dash components

Building Dashboards with Dash and Plotly

Alex Scriven

Data Scientist

Why user input?

Some useful applications of user inputs:

Filtering across a large number range (number inputs)
- Consider a dropdown with 2000 'year' values!
Filtering based on text-matching (search or text inputs)
Creating a login (password and email/text input)
- Beyond this course

User input in Dash

A user input is a dash core components Input type (dcc.Input)

An id is required for callback usage
The type will default to text (more on this later!)
The placeholder appears faded in the input box

A small image of a rectangle with a black border inside which has faded grey text of "Enter your text"

dcc.Input(
    id='my_input',
    type='text',
    placeholder="Enter your text")

Using the input

Similar to previous input work:

Input becomes a Python variable
Used with the callback
- Typically to filter a DataFrame
For example (right):
- df subset using input

#@app.callback()
def update_plot(my_input):
    df = data.copy(deep=True)
    df = df[df['column'] == my_input]
    fig = px.scatter(data_frame=df)
    return fig

User input types

Dash offers useful input types:

Some are straightforward: 'text', 'number', 'password', 'email'
Some are more specialized:
- 'range' produces a range slider
- 'tel' and 'url' are for telephone numbers and website urls
Some are advanced
- 'search' and 'hidden' involve advanced browser interaction

Restricting user input

The type argument automatically sets some limitations.

E.g., an email type requires [email protected] format

dcc.Input(
    id='my_input',
    type='email',
    placeholder="Enter your email")

A gif of an input textbox where someone enters the words 'some-text,' and the mouse leaves the box, which causes the outside of the box to turn red, indicating an error. The mouse then re-enters the box and extends this by adding '@gmail.com' to the end, which doesn't cause an error when the mouse leaves

Additional restrictions

Additional arguments for specific types help control input

E.g., a number type only allows numbers
- Additionally: min and max set numerical limit
- minLength / maxLength for text inputs
E.g., a text type also has pattern for regex validation

A gif of a small box with up and down toggle keys on the right. The mouse clicks these to produce the number 1, then (after clicking the down arrow) the number turns to zero. The number 249 is typed, and no action is seen, however then the number 251 is typed, which causes a red box to appear around the input indicating an error.

dcc.Input(
    id='my_input',
    type='number',
    max=250)

Toggling an input

We can turn off an input programmatically with disabled

Or we can force its usage with required

(Both are True/False arguments of dcc.Input())

A gif of a rectangular input box that a mouse tries to click into but cannot. The text inside the box is "A disabled input"

dcc.Input(id='my_input', disabled=True)

A gif of a rectangular input box that a mouse clicks into and then out of without entering text. A red box appears around the input once the mouse clicks outside, indicating an error. The text inside the box is "A Required input"

dcc.Input(id='my_input', required=True)

When to update

A vital argument is debounce: Determines callback trigger (on unfocus or 'Enter') versus as-you-type

Here debounce is False (callback as you type)
- Filtering for R, Re, Red, Redd in turn

dcc.Input(id='my_input', type='text',
          debounce=False)

A gif of a text input with the placeholder text 'Filter Product Descriptions'. Text is typed in one letter at a time, and the graph below changes to show less data each time. The text typed is R-E-D-D. When it is all entered, there is no data available indicating there are no data points that have redd in their description column

Let's practice!

Building Dashboards with Dash and Plotly