Repository navigation
Feedback on Dash 4 DCC components #3449
Description
The new DCC components in Dash 4 are fantastic! After taking the pre-release for a spin, I have a few suggestions:
Dropdown
- Add a prop so it's possible change labels such as Search, Selected, Select All, Deselect All
- Enable focus when clicking on a label with
htmlForlinked to the dropdown - Make sure long labels in the
optionsare visible on small screens
Input
- Add style for focus state and disabled state.
Slider
- The input fields is a nice feature, but it would be helpful to make it easy to style. For example by default it only displays 7 digits, which could be misleading when dealing with large numbers. Perhaps add props
input_styleandinput_className - When using the
classNameprop, it only applies the style to the slider portion, rather than the whole component. For example, if you add a top margin, then the input boxes are not aligned with the slider.
Consistency
Consistency in design helps components look cohesive, especially in forms and control panels. I appreciate that the inputs now have consistent colors and heights. Are there any plans to make the Inputs and Dropdowns more aligned as well?
- It might be more user-friendly if Inputs matched the Dropdown by taking up the full container width, rather than a fixed width of 170px. It would make it easier to add labels too. Currently the labels are in-line with the Inputs and for the Dropdown, they are stacked.
- The Dropdown has a margin, so if you place an Input and a Dropdown side-by-side they are not aligned.
- The Dropdown has a nice disabled state style. The Input doesn't change visibly except the cursor
- Inputs inherit their background via
var(--Dash-Fill-Inverse-Strong), but Dropdowns simply inherit from the container without explicitly setting the same variable. This leads to differences in appearance depending on the container background.
CSS
- Would it be possible to use CSS variables for the box-shadow color? This would make it easier to adjust for dark themes.
Activity
ghaarsma commentedon Sep 26, 2025
I gave 4.0.0rc1 a spin on a fairly complex Dash application (~200 callback functions). Upgrade went smooth including the type checking (mypy).
One piece of feedback with respect to the new dcc.Dropdown. In general the new layout is stylish, but I'm wandering if we can make the reordering of options (based on what is chosen) optional. We have a large number of Dropdowns with limited (< 4~5 options) in a very specific order.
I think we would like to keep the implicit order as we gave it during Dropdown construction. Perhaps we can make this an option with a sensible default.
Second thing is the separate search box. I think this is visually much clearer, but it does add a significant screen space if the DropDown is small. Not sure if this is worthy of another option.
Top image is new 4.0.0rc1, Bottom is current 3.2.0 release
AnnMarieW commentedon Sep 28, 2025
@ghaarsma
Thanks for checking out the dash 4 prelease!
Note that if you set
dcc.Dropdown(searchable=False)then the search field does not show:antonymilne commentedon Sep 29, 2025
Just adding some cross links to the plotly forums to make it easier for me (and hopefully others) to find everything:
FYI @petar-qb
KoolADE85 commentedon Oct 2, 2025
Thanks @AnnMarieW for the detailed list! The specific component issues should now be addressed in the PR you linked.
Your points around consistency between the different components are valid as well. I'm also going to take a "big picture" pass on this to make sure everything feels consistent among the various components.
@ghaarsma thanks for your feedback here - it's super helpful to hear how it working out in the wild.
We are playing with different behaviours in single vs multi select for the next
rc2of this. The idea we're toying with is:I'm hopeful that this will help the "implicit ordering" problem.
petar-qb commentedon Oct 27, 2025
Hello everyone 👋 The new components in
4.0.0rc2are looking fantastic! 😍I noticed a couple of small inconsistencies in the updated Dropdown that might be worth checking out:
Dropdown(multi=True), the"search"field automatically receives focus, but this doesn’t happen with theDropdown(multi=False). Not sure if this is intentional, although it does feel a bit inconsistent.Enterwhile an option is focused doesn’t toggle selection, so selecting or deselecting via keyboard isn’t possible.Dropdown(multi=True). It would be great if this behaviour were configurable, either opt-in or opt-out. Both approaches would work for me 😃