Enhancement/update dropdown design #12956 by rishi-kumar0612 · Pull Request #13004 · streamlit/streamlit

rishi-kumar0612 · 2025-11-12T19:34:17Z

Describe your changes

Updated the selectbox dropdown styling to match the visual design of the top navigation dropdowns, ensuring a consistent user experience across all dropdown components in Streamlit.

Key changes:

Applied theme.radii.xl border-radius to dropdown container for rounded corners on all edges
Added conditional box-shadow based on light/dark theme (0px 4px 16px rgba(0, 0, 0, 0.16) for light, 0px 4px 16px rgba(0, 0, 0, 0.7) for dark)
Implemented consistent 1px solid borders using theme.colors.borderColor across all edges
Updated dropdown item highlighting with rounded corners using ::before pseudo-element and proper z-index layering (theme.zIndices.base for background, theme.zIndices.priority for content)
Optimized padding structure (theme.spacing.sm on container, no horizontal margins on items) to prevent horizontal scrollbar while maintaining proper visual spacing

Files modified:

frontend/lib/src/components/widgets/Selectbox/Selectbox.tsx - Updated Popover Body override with rounded corners, conditional shadow, and borders
frontend/lib/src/components/shared/Dropdown/VirtualDropdown.tsx - Adjusted container padding to theme.spacing.sm for proper spacing
frontend/lib/src/components/shared/Dropdown/styled-components.ts - Enhanced ThemedStyledDropdownListItem with rounded highlight backgrounds using theme-based z-index values for proper layering

Screenshot or video (only for visual changes)

Dark Theme:

Before	After

Before: Square corners, minimal elevation, basic border
After: Rounded corners (xl radius), prominent shadow for elevation, modern styling

Light Theme:

Before	After

Before: Square corners, minimal elevation, basic border
After: Rounded corners (xl radius), subtle shadow for elevation, modern styling

Comparison with Top Navigation Dropdown

Selectbox Dropdown	Top Navigation Dropdown

Both dropdowns now share consistent visual language: xl rounded corners, theme-conditional shadows, and uniform border styling

GitHub Issue Link (if applicable)

https://github.com/streamlit/streamlit/issues/12956

Related Issue

This PR addresses #12956 by implementing the new dropdown styling for st.selectbox.

cc @sfc-gh-nbellante @jrieke - This is the proof of concept we discussed. Ready for early feedback before expanding to other widgets!

Testing Plan

Explanation of why no additional tests are needed

This change is purely visual/styling and does not modify component behavior, functionality, props, or API. The existing component logic, user interactions, keyboard navigation, and accessibility features remain unchanged. All styling is applied through BaseUI override mechanisms and Emotion styled-components, which are well-established patterns in the Streamlit codebase. The component's functional behavior is already covered by existing tests.

Unit Tests (JS and/or Python)

JavaScript Tests:

✅ Ran unit tests for modified components: VirtualDropdown.test.tsx and Selectbox.test.tsx
✅ All 27 tests passed (4 tests in VirtualDropdown, 23 tests in Selectbox)
✅ No new unit tests required as component functionality remains unchanged
✅ Test output confirms no regressions in existing behavior

Test Results:

Test Files  2 passed (2)
Tests  27 passed (27)
  - VirtualDropdown.test.tsx: 4 tests passed
  - Selectbox.test.tsx: 23 tests passed

E2E Tests

✅ Ran E2E test: e2e/scripts/st_selectbox.py
✅ Verified all selectbox interactions work correctly with new styling
✅ No new E2E tests required as user interactions remain identical

Any manual testing needed?

Visual Consistency:

✅ Verified dropdown styling matches top navigation dropdown in both light and dark themes
✅ Confirmed border-radius of theme.radii.xl applied uniformly to all corners
✅ Validated conditional shadow rendering (light: rgba(0,0,0,0.16), dark: rgba(0,0,0,0.7))
✅ Checked 1px solid borders using theme.colors.borderColor on all edges

Responsive Behavior:

✅ Tested across different screen sizes (desktop 1920x1080, tablet 768x1024, mobile 375x667)
✅ Confirmed no layout issues or content overflow at any viewport size
✅ Verified dropdown positioning adapts correctly in sidebar context

Interactive States:

✅ Hover state: Rounded corner highlights appear correctly with theme.colors.darkenedBgMix15 background
✅ Selection state: Rounded corner highlights appear correctly with theme.colors.darkenedBgMix25 background
✅ Focus state: Visual focus indicators working properly with keyboard navigation
✅ Disabled state: Styling applies correctly to disabled selectbox

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

- Apply theme.radii.xl border-radius for rounded corners - Add conditional box-shadow based on light/dark theme - Implement consistent 1px solid borders - Update item highlighting with rounded ::before pseudo-element - Optimize padding structure to prevent horizontal scrollbar - Use theme.zIndices for proper layering

snyk-io · 2025-11-12T19:34:26Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

frontend/lib/src/components/shared/Dropdown/styled-components.ts

sfc-gh-jrieke · 2025-11-13T06:22:11Z

This looks great! Got a few comments so far.

What we should definitely change:

Looks like the dropdowns are slightly offset from the selectbox itself and shifted a few pixels to the side. I think we want to keep them in the same position as today.

What I'm unsure about, will add our designer @shamis15 to this discussion:

I see the dropdowns have a gray border now, which is congruent with the dropdowns of top nav and st.popover, but I'm not sure if we also want that for selectbox dropdowns (or if we should actually remove the border for all of these dropdowns in light mode, and just show a border in dark mode).
The new dropdown style looks a bit funny with 16px font size. Maybe we should make it 14px for selectbox as well, or we need to adjust the paddings a bit to make it look better.

jrieke · 2025-11-13T07:05:47Z

Could you maybe also put a small public demo app of this on Community Cloud and post the link here? That would make it a bit easier for our designer to look at it live :)

rishi-kumar0612 · 2025-11-16T21:19:37Z

Thanks a lot for the feedback! I’ve pushed a couple of updates and set up a small public demo app so it’s easier to review the styling live.

Demo app: https://st-selectbox-ui-changes.streamlit.app/

Changes since your last comments:

Fixed the dropdown position offset so the menu now lines up exactly with the selectbox trigger (no horizontal shift).
Reduced the dropdown font size from 16px → 14px to better match the new visual style and avoid the “oversized” look.
Cleaned up the styled-components imports and removed unused zIndex imports flagged by CodeQL.

Open questions for design:

Borders: Right now the selectbox dropdown uses the same 1px border as top nav / popover in both light and dark mode. I’m happy to:
- keep it as-is for consistency, or
- switch to “no border in light mode, keep border only in dark mode” if that’s the preferred direction.
Spacing: With font-size 14px and the current padding setup, does the vertical/horizontal spacing feel right, or would you prefer slightly tighter/looser padding on items?

@jrieke , @shamis15 would love your thoughts on the current look in the demo app. Once we’re aligned on border and spacing, I can polish anything remaining and then we can consider rolling this out to other dropdown-based widgets as a follow-up.

shamis15 · 2025-11-18T15:27:32Z

Hi! Yes I will handle the design later this week and get back to you! Thank you so much!

rishi-kumar0612 · 2025-11-24T19:52:52Z

Hi @shamis15, @jrieke! Just wanted to gently follow up on this.
The demo app is still live at https://st-selectbox-ui-changes.streamlit.app/
Whenever you get a chance to review.

No rush—just wanted to make sure this stays on your radar. Happy to make any adjustments once I hear back on the border/spacing questions! 😊

lukasmasuch · 2025-12-11T16:28:45Z

@cursor review

cursor

✅ Bugbot reviewed your changes and found no bugs!

sfc-gh-jrieke · 2025-12-12T13:00:18Z

Yup, still on our radar. Sorry I was on vacation the last few weeks but @shamis15 and I discussed the designs yesterday, @shamis15 can you post here once that's finished?

rishi-kumar0612 · 2026-01-02T17:55:38Z

Hey @sfc-gh-jrieke @shamis15,
hope your holidays went well ,
has there been any update on the design ?

shamis15 · 2026-01-05T13:34:09Z

Hi! @rishi-kumar0612 Sorry I was on leave and then vacation! Here is the updated design. It will be in the form of a figma file so let me know if that works for you or if not I can just give you a screenshot with all the specs :) thanks again for the contribution - I love the new design.
Updated st.selectbox.fig.zip

rishi-kumar0612 · 2026-01-06T20:13:58Z

Hi @shamis15! Welcome back and a Happy New Yeat🎉

Thanks for the Figma file - it works perfectly! I've reviewed the design specs and they look great. I'll update the implementation to match exactly and push the changes shortly.

Quick question: The design shows 16px font size for dropdown options and borders in both themes - confirming this is correct?

Thanks again for the detailed specs! Will have the updates ready soon. 😊

shamis15 · 2026-01-06T20:31:53Z

hmm - it should only be borders in dark mode. The only time they both have borders is in selected state.
In response to the drop down - for now we are keeping the main components 16px as the base font. I know the pages has the drop down of 14px but the pages are treated slightly differently so while we want them to feel the same we will keep the same font as the rest of the components for now. (let me know if that makes sense)

Copilot

Pull request overview

This PR enhances the visual design of the selectbox dropdown by applying consistent styling that matches Streamlit's top navigation dropdowns, ensuring a cohesive user experience across all dropdown components.

Key Changes

Applied rounded corners (theme.radii.xl) to dropdown containers and list items
Implemented theme-conditional box shadows for light and dark modes
Enhanced dropdown item highlighting with rounded backgrounds using ::before pseudo-elements and proper z-index layering
Updated padding structure to prevent horizontal scrollbars while maintaining visual spacing

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
`frontend/lib/src/components/shared/Dropdown/styled-components.ts`	Enhanced dropdown list item styling with rounded corners, background highlighting using pseudo-elements, z-index layering, and forced transparency on BaseWeb inner wrappers
`frontend/lib/src/components/shared/Dropdown/VirtualDropdown.tsx`	Updated container padding from zero to `theme.spacing.sm` and added overflow control properties
`frontend/lib/src/components/shared/Dropdown/Selectbox.tsx`	Applied comprehensive styling to Popover Body with rounded corners, theme-conditional shadows, borders, overflow control, and updated dropdown component styles

Copilot · 2026-01-07T00:13:22Z

frontend/lib/src/components/shared/Dropdown/VirtualDropdown.tsx

        // Somehow this adds an additional shadow, even though we already have
        // one on the popover, so we need to remove it here.
        boxShadow: "none",
+        overflow: "hidden",


The overflow: "hidden" properties are set on both the parent container (Popover Body) and the VirtualDropdown component. Setting overflowX: "hidden" and overflowY: "auto" separately when overflow: "hidden" is already set creates conflicting overflow rules. Consider removing the redundant overflow: "hidden" on line 122 since lines 123-124 provide more specific overflow control.

Suggested change

overflow: "hidden",

Copilot · 2026-01-07T00:13:23Z

frontend/lib/src/components/shared/Dropdown/styled-components.ts

+    "& *": { backgroundColor: "transparent !important" },
+    "& [data-baseweb]": { backgroundColor: "transparent !important" },


Using !important to override styles should generally be avoided as it makes the codebase harder to maintain and debug. While overriding third-party library styles (like BaseWeb) may sometimes require it, consider whether the BaseWeb override structure allows achieving the same result without !important, such as by using more specific selectors or overriding at a different level in the component hierarchy.

sfc-gh-dmatthews · 2026-01-15T04:08:44Z

Hi @rishi-kumar0612. I was just wondering where you were on finishing this PR per the above comments. I have implemented select-all for st.multiselect, but it overlaps with this PR. I can merge mine with some of the styling in place for st.selectbox and st.multiselect, or if you'll be done soon, I can wait and pull it from here. I would like to merge the select-all feature sometime this month. Thanks! #13015

rishi-kumar0612 · 2026-01-16T16:16:59Z

Hi @sfc-gh-dmatthews!

I'm on it! Had some pre-planned work and got busy with it—I apologize for the delay. I will have the updates pushed by this weekend (Jan 18-19). Should be ready for review early next week.

If you need to move faster for your select-all feature, feel free to go ahead and I can rebase on top of #13015 once it merges. The changes are fairly isolated so shouldn't cause major conflicts.

Otherwise, I'll have this ready for you to pull by Monday/Tuesday. Let me know what works better for your timeline! 👍

Thankyou for your understanding

sfc-gh-dmatthews · 2026-01-26T02:49:26Z

@rishi-kumar0612 Hi again! 👋🏻 I just wanted to check in since I want to merge the select-all feature for st.multiselect this week.

…ithub.com/rishi-kumar0612/streamlit into enhancement/update-dropdown-design-#12956

rishi-kumar0612 · 2026-01-27T00:35:18Z

Hi @sfc-gh-dmatthews, thanks for the nudge!

I've just pushed the updates to align with the Figma specs provided by @shamis15. This is now ready for review so we can unblock the st.multiselect work.

Updates in the latest commits:

Design Compliance: Adjusted borders and implemented the exact spacing requirements
Visual Error Fix: Resolved the horizontal/vertical scrollbar issues in VirtualDropdown by switching from vertical margins to a padding/inset-based layout.
Font Size: Changed Font Size to 16px to match design requirements.

Live Demo:
You can verify the latest UI behavior here: https://st-selectbox-ui-changes.streamlit.app/

Let me know if anything else is needed to get this merged!

sfc-gh-nbellante · 2026-01-27T16:38:35Z

Hi @rishi-kumar0612 I think this looks great, just need to get some formatting ironed out and the snapshots updated.

rishi-kumar0612 · 2026-01-27T17:41:12Z

Hi @sfc-gh-nbellante, thank you for the feedback! I have ironed out the formatting and updated the E2E snapshots for the Selectbox and Multiselect components across Chromium, Firefox, and Webkit.

jrieke · 2026-01-27T23:59:24Z

Wohoo, thanks for getting this merged! @rishi-kumar0612 would love to send you some swag as a little thank you, feel free to fill out this form: https://docs.google.com/forms/d/e/1FAIpQLSe7cXh3H1DmrgNpVew9qViGIHX7vdEbTv5isA44_z5bgaKTKg/viewform?usp=send_form

rishi-kumar0612 · 2026-01-28T00:42:46Z

@jrieke thanks so much,
looking out for more contributions !!!💪

This reverts commit 5d7b31e.

sfc-gh-dmatthews · 2026-02-04T00:28:22Z

@rishi-kumar0612 Just to let you know, the revert of your PR is just temporary. There was an issue completing the style for the other elements before the cutoff, so this was reverted in the release, but will stay in place for the next release when my PR joins it. 😄 Just letting you know.

rishi-kumar0612 added 2 commits November 10, 2025 12:01

st.selectbox style update

683685f

rishi-kumar0612 mentioned this pull request Nov 12, 2025

Update design of dropdown menus to align with top nav #12956

Closed

2 tasks

sfc-gh-jrieke added change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Nov 13, 2025

github-advanced-security bot found potential problems Nov 13, 2025

View reviewed changes

frontend/lib/src/components/shared/Dropdown/styled-components.ts Fixed Show fixed Hide fixed

jrieke added the status:needs-product-approval PR requires product approval before merging label Nov 13, 2025

rishi-kumar0612 and others added 2 commits November 14, 2025 10:34

Fix dropdown position offset and reduce font size to 14px

6dcd04a

fixed import errors in styled-components.ts

5eb11a0

cursor bot reviewed Dec 11, 2025

View reviewed changes

This was referenced Dec 28, 2025

Select all or select all matches in st.multiselect (plus drop down styling) #13015

Closed

[Fix] Add borders to dropdowns in dark mode #13346

Closed

lukasmasuch requested a review from Copilot January 7, 2026 00:08

Copilot started reviewing on behalf of lukasmasuch January 7, 2026 00:09 View session

Copilot AI reviewed Jan 7, 2026

View reviewed changes

rishi-kumar0612 added 4 commits January 26, 2026 12:04

fixed changes according to new design

c6433f2

Merge branch 'enhancement/update-dropdown-design-#12956' of https://g…

181eb56

…ithub.com/rishi-kumar0612/streamlit into enhancement/update-dropdown-design-#12956

added changes to virtual dropdown

8d0f482

Apply dropdown design fixes

fa7fd9b

sfc-gh-nbellante added the security-assessment-completed label Jan 27, 2026

jrieke added status:product-approved Community PR is approved by product team and removed status:needs-product-approval PR requires product approval before merging labels Jan 27, 2026

Fixed linting errors and Updated e2e snapshots

6e2bc8e

sfc-gh-nbellante added 2 commits January 27, 2026 11:03

Retrigger CI

aa25a9f

Merge develop into enhancement/update-dropdown-design-#12956

5a2cd6e

sfc-gh-nbellante marked this pull request as ready for review January 27, 2026 20:49

sfc-gh-nbellante approved these changes Jan 27, 2026

View reviewed changes

sfc-gh-nbellante merged commit 5d7b31e into streamlit:develop Jan 27, 2026
39 checks passed

sfc-gh-nbellante added a commit that referenced this pull request Feb 3, 2026

Revert "Enhancement/update dropdown design #12956 (#13004)"

5bdac6a

This reverts commit 5d7b31e.

github-actions bot pushed a commit that referenced this pull request Feb 3, 2026

Revert "Enhancement/update dropdown design #12956 (#13004)"

8a22025

This reverts commit 5d7b31e.

		"& *": { backgroundColor: "transparent !important" },
		"& [data-baseweb]": { backgroundColor: "transparent !important" },

Conversation

rishi-kumar0612 commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

Screenshot or video (only for visual changes)

Comparison with Top Navigation Dropdown

GitHub Issue Link (if applicable)

Related Issue

Testing Plan

Explanation of why no additional tests are needed

Unit Tests (JS and/or Python)

E2E Tests

Any manual testing needed?

Uh oh!

snyk-io bot commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

Uh oh!

sfc-gh-jrieke commented Nov 13, 2025 • edited by jrieke Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jrieke commented Nov 13, 2025

Uh oh!

rishi-kumar0612 commented Nov 16, 2025

Uh oh!

shamis15 commented Nov 18, 2025

Uh oh!

rishi-kumar0612 commented Nov 24, 2025

Uh oh!

lukasmasuch commented Dec 11, 2025

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

✅ Bugbot reviewed your changes and found no bugs!

Uh oh!

sfc-gh-jrieke commented Dec 12, 2025

Uh oh!

rishi-kumar0612 commented Jan 2, 2026

Uh oh!

shamis15 commented Jan 5, 2026

Uh oh!

rishi-kumar0612 commented Jan 6, 2026

Uh oh!

shamis15 commented Jan 6, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

sfc-gh-dmatthews commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rishi-kumar0612 commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sfc-gh-dmatthews commented Jan 26, 2026

Uh oh!

rishi-kumar0612 commented Jan 27, 2026

Uh oh!

sfc-gh-nbellante commented Jan 27, 2026

Uh oh!

rishi-kumar0612 commented Jan 27, 2026

Uh oh!

Uh oh!

jrieke commented Jan 27, 2026

Uh oh!

rishi-kumar0612 commented Jan 28, 2026

Uh oh!

sfc-gh-dmatthews commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rishi-kumar0612 commented Nov 12, 2025 •

edited

Loading

snyk-io bot commented Nov 12, 2025 •

edited

Loading

sfc-gh-jrieke commented Nov 13, 2025 •

edited by jrieke

Loading

sfc-gh-dmatthews commented Jan 15, 2026 •

edited

Loading

rishi-kumar0612 commented Jan 16, 2026 •

edited

Loading

sfc-gh-dmatthews commented Feb 4, 2026 •

edited

Loading