User inputs in Dash components
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 can overcome limitations of other interactive elements we've seen. We can allow users to enter numerical values, which helps with data from a large range. Imagine a dropdown with two thousand values for the 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. As always, an id is required for callback integration. The type will default to text, but there are other options we will cover. It's good practice to provide a placeholder that shows faded guidance text before the user types.4. Using the input
Using user inputs works just like other Dash components. The input becomes a Python variable. It's passed to a callback function, which then performs some update in the app. In this example, the callback decorator is omitted for space. Our function takes the input as an argument, and uses that in the plot title.5. User input types
Dash supports many 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 for telephone numbers and website URL inputs. There are even advanced input types for more complex browser interactions, which we won't cover here.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 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 are familiar with adding some input, 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 is set to true, the callback will only be triggered if the user hits enter or the focus is changed from the input. The callback filters some columns 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.Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.