Video Lesson: 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 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.This exercise is part of the course
Building Dashboards with Dash and Plotly
Learn how to build interactive and insight-rich dashboards with Dash and Plotly.
Turn your Dash apps into user-driven experiences by mastering interactive components. Learn how to include dropdowns, date pickers, and event free text fields to modify elements on your Dash apps and build truly self-service dashboards your users can explore.
Exercise 1: Callbacks in DashExercise 2: A dropdown for sales by countryExercise 3: Fixing a broken dashboardExercise 4: Interactive componentsExercise 5: Date picker for sales dataExercise 6: A date picker callbackExercise 7: Slider for sales dataExercise 8: Reusable Dash componentsExercise 9: Re-using Dash componentsExercise 10: DRY-styling Dash componentsExercise 11: User inputs in Dash componentsExercise 12: Searching product descriptionsExercise 13: Analyzing top customer locationsWhat is DataCamp?
Learn the data skills you need online at your own pace—from non-coding essentials to data science and machine learning.