1. User inputs in Dash components
Let's learn how to harness user inputs to enhance the interactivity of our Dash apps.
2. Why user input?
User inputs overcome some limitations of other interactive elements we have seen.
We can allow users to enter numerical values, which helps for data with a large range.
Imagine a dropdown with two thousand values for year.
We can filter based on text matches, either exact or pattern.
Though it is beyond the scope of this course, we could also create a login feature.
3. User input in Dash
User inputs are a dash core components Input type, aliased as dcc-dot-Input.
See the example here.
An ID is required, like other core components, for callback integration.
The type will default to text, but there are other options we will cover.
It's a good idea to provide a placeholder. This produces faded text to direct users on what to do.
4. Using the input
Using user input components is similar to other interactive core components.
The input becomes a Python variable.
This is then used in a callback to effect some change and regenerate part of the app.
In this example, the standard app-dot-callback decorator has been removed for space. We can see a function that takes the user input as an argument to the function.
The function copies the DataFrame, then subsets some column, regenerates the plot, and returns it to the app.
5. User input types
Dash has a variety of user-input types.
Some are what we expect from the name. This includes the most general text input, a number input, and the common password and email inputs we see in website logins.
There are also more specialized types such as
range, which creates a range slider,
and tel and url, which are for telephone numbers and website URL inputs.
There are also advanced input types that are beyond the scope of this course which can be used for advanced browser interaction.
6. Restricting user input
The type argument is useful as it automatically sets some validation procedures on the user input.
For example, an email type requires a standard email format, something-at-something-dot-com. If this is not entered, a red box appears around the input, and the callback won't proceed.
7. Additional restrictions
We can further control user input with additional arguments available for certain input types.
A number type by default only allows numbers, but has additional arguments, min and max, to set the numerical limits of the input.
There are similar minLength and maxLength arguments available for text inputs.
Text inputs also allow regex validation, where the input must match the regex pattern provided via the pattern argument.
8. Toggling an input
We can also disable an input using the disabled argument, potentially based on some other input or selection,
or we can force the user to use the input using the required argument.
These are both Boolean True/False arguments to the dcc-dot-Input function.
9. When to update
Most users would be familiar with adding some input, then hitting 'Enter', or clicking away to trigger the change. We can change this behavior using the debounce argument.
In this example, debounce has been set to False. We can see the callback is getting triggered as the user types. If it was set to true, the callback will only be triggered if the user hits enter or the focus is changed from the input.
The callback is filtering some column in the data for the letter R, then R-e, then R-e-d, and R-e-d-d. We can see there is no data for R-e-d-d.
10. Let's practice!
Let's practice adding, validating, and using user inputs in components within our Dash apps.