Select all or select all matches in `st.multiselect` (plus drop down styling) by sfc-gh-dmatthews · Pull Request #13015 · streamlit/streamlit

sfc-gh-dmatthews · 2025-11-14T19:02:42Z

Describe your changes

The PR introduces new functionality for st.multiselect to "Select all" or "Select all matches." Because a separator line was introduced between the original options and the new select-all options, a new style was introduced for all dropdowns, so this also unifies styling changes across multiple widgets for consistency.

When opening a multiselct drop down, if there is more than one option, a "Select all" option will appear at the top, with a separating line below it.
If you search for items in a multiselect by typing and there is more than one match, a "Select x matches" option will appear at the top.
When accept_new_options is true for selectbox or multiselect, the "Add" option at the bottom has a separator line above it.
The highlight effect for all dropdown was updated so that the highlight is inset. In multiselect, the selected item aligns with the highlighted items in the drop down below and has the same border radius (which is 2px larger than previously). This affects the following:
- st.multiselect
- st.selectbox
- Dataframe column context menu, formatting menu, and visibility menu
- st.navigation in top mode
- st.time_input
- The time subselector of st.datetime_input
All dropdown borders and shadow boxes were updated to have shadow box and no border in light mode, and the opposite in dark mode. In addition to the elements listed above, this affects the following:
- st.popover
- st.date_input
- st.time_input
- st.color_picker

Screenshot or video (only for visual changes)

New	Before
Add select-all option to multiselect and restyle the highlight (also applies to selectbox)


Adjust roundness and padding of selected items in multiselect (match highlight)


Add select-all-matches option to multiselect and apply new style to add option (also applies to selectbox

Unify style of time input


Unify style of date and datetime input (border & shadows)


Unify style of column menus

Unify style of color picker (border & shadow)

Unify style of top nav

GitHub Issue Link (if applicable)

Testing Plan

Explanation of why no additional tests are needed
Unit Tests (JS and/or Python)
E2E Tests
Any manual testing needed?

Contribution License Agreement

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

github-actions · 2025-11-14T19:03:13Z

✅ PR preview is ready!

Name	Link
📦 Wheel file	https://core-previews.s3-us-west-2.amazonaws.com/pr-13015/streamlit-1.53.1-py3-none-any.whl
📦 `@streamlit/component-v2-lib`	Download from artifacts
🕹️ Preview app	pr-13015.streamlit.app (☁️ Deploy here if not accessible)

snyk-io · 2025-11-14T19:03:50Z

✅ 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/widgets/Multiselect/Multiselect.test.tsx

jrieke · 2025-12-28T13:13:33Z

This generally feels good but few comments:

When only one item is left to select, it sometimes still shows "Select all (1)". This shouldn't show in this case since it's only one item you can click on anyway.
The "(N)" behind "Select all" looks a bit cluttered. I would do a) "Select all" without anything else if the user didn't type a search string (then how many items it is doesn't add much value in my eyes anyway) and b) do "Select N matches" if the user typed a search string.
The current design with the line doesn't look great. We eventually want it to resemble the image below (see also Add select all shortcut or button for multiselect #4714). There's currently another PR at Enhancement/update dropdown design #12956 #13004 to change the overall dropdown design to make it more similar to below. It would be nice to wait for that to make the line look better (and also add a line for the "Add: ..." option) but I think it's a bit stuck in design, so don't want to block on that. Maybe for now we actually remove the line and then re-introduce it once that other PR is done?
I'm wondering whether we should only show this if there are at least M items to show. It looks a bit weird for a multiselect with just two options to always show "Select all" in addition to the two options. WDYT @sfc-gh-dmatthews? Maybe we only show it for more than 3 or 5 options or something like that?

sfc-gh-dmatthews · 2026-01-09T10:13:06Z

The design image shows a larger radius on the selected items than the highlights, but I currently have them the same (which was the highlight radius in the design image and the previous radius of the selected items). I wonder about increasing the padding on the sides a bit so the scroll bar won't overlap with the rightmost edge of the highlight. I have the selected items (text and highlight) lining up on the left edge which is a little more horizontal padding on the highlight than the design image.

github-actions · 2026-01-26T17:11:50Z

📉 Frontend coverage change detected

The frontend unit test (vitest) coverage has decreased by 0.0000%

Current PR: 86.4300% (13726 lines, 1862 missed)
Latest develop: 86.4300% (13651 lines, 1852 missed)

✅ Coverage change is within normal range.

📊 View detailed coverage comparison

sfc-gh-lwilby · 2026-01-29T17:55:32Z

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

      height: "auto !important",
    },
+
+    // Apply highlight effect and padding to the first div inside the li


Is this styling meant to be for the select all?

The highlight effect can apply to any item, including the "select all" and "add" inserted elements. All of the items exist as divs in an li wrapper.

e2e_playwright/st_dataframe_config_test.py

frontend/lib/src/components/widgets/Multiselect/Multiselect.tsx

sfc-gh-bnisco · 2026-01-29T18:55:28Z

frontend/lib/src/components/widgets/Multiselect/Multiselect.test.tsx

-      expect(options.length).toBe(2)
-      expect(options[0]).toHaveTextContent("b")
-      expect(options[1]).toHaveTextContent("c")
+      // Should have "Select all" + "b" + "c" = 3 total


question: I think these selectors (including the ones above) all need to be updated because options[0] is Select all. Utilize getByText("b") instead, since that's more resilient to these kinds of changes where it reorders items.

frontend/lib/src/components/widgets/DataFrame/menus/ColumnMenu.tsx

frontend/lib/src/components/widgets/DataFrame/menus/ColumnVisibilityMenu.tsx

frontend/lib/src/components/widgets/DataFrame/menus/FormattingMenu.tsx

sfc-gh-bnisco · 2026-01-30T18:18:28Z

frontend/lib/src/theme/primitives/radii.ts

 // chatInput, full, and maxCheckboxRadius are not impacted by this config.
 export const radii = {
  md: "0.25rem",
+  // This is a temporary name prior to refactoring md to sm, which will cause merge conflicts elsewhere.


question: When is this refactoring planned to happen?

I would have to defer to the engineers here. I'd want everyone to have a heads up on the shift of meaning (md -> sm and md -> new). Since it would have to apply everywhere used, it would basically impact everyone, so I just didn't want to touch that in this PR.

I'm a little worried about introducing this specific radii, especially given the potential blast radius and given that it's temporary without a specific work item attached to it.

Can we use an existing radii in the meantime?

@mayagbarnes - Tagging you as the theming expert. Any thoughts on what we should do here?

There wasn't the correct radii between medium and default, so that why the new one. We previously had medium, default, xlarge, so I could call this one "large", but it is smaller than default, so that didn't seem right.

It's literally halfway between, so the other option is to calculate the average on the fly.

frontend/lib/src/components/widgets/TimeInput/TimeInput.tsx

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

frontend/lib/src/components/widgets/Multiselect/Multiselect.tsx

sfc-gh-bnisco · 2026-01-30T22:16:08Z

...apshots__/linux/widget_state_test/widget_state-show_widget_border_when_disabled[firefox].png

I think this is a slight regression in padding. Notice how the placeholder text in selectbox and multiselect are vertically aligned before. After, the multiselect placeholder text is further to the left:

Before:

After:

I was fighting this one. I'll try again.

Alright, I shifted the placeholder by one pixel. Here's the tradeoff that's happening:
To keep the left margin the same as the top and bottom margin of selected items in st.selectbox the padding was reduced by one pixel, I think from border impacts. I had shifted the placeholder text to also align with the text in the dropdown, which had the highlight effect align with the selected background of items in the widget.

So, I've unshifted the placedholder text, but we might need to revisit with Jess and see if we want to shift everything so it all aligns, while maintaining a uniform margin (top, bottom, left) on that first selected item in the multiselect.

Also, looking really close, it looks like there is an inset vs outset border, so the dropdown border itself is a little off.

I think I'm still seeing this cause unexpected diffs. See how the placeholder text has changed from old to new:

Kapture.2026-02-02.at.09.27.57.mp4

sfc-gh-dmatthews · 2026-01-31T07:08:57Z

If it's too messy, we can revert the drop down width adjustment and little shifts to deal adding the border in dark mode. It's just a pixel, but you can kind of see that it's off by looking at the first item, scrolled all the way up. cc @sfc-gh-jshamis

sfc-gh-dmatthews · 2026-02-02T15:53:32Z

frontend/lib/src/theme/primitives/radii.ts

 // chatInput, full, and maxCheckboxRadius are not impacted by this config.
 export const radii = {
  md: "0.25rem",
+  // TODO: Rename md -> sm, and md2 -> md


@sfc-gh-jshamis said yes to this proposed renaming plan.

sfc-gh-dmatthews · 2026-02-06T15:43:22Z

Moved to Graphite stack starting with #13794

Multiselect all matches

7b76a74

jrieke changed the title ~~[POC] Multiselect all matches~~ [Prototype] Multiselect all matches Nov 14, 2025

sfc-gh-dmatthews requested a review from sfc-gh-lwilby November 14, 2025 20:58

update tests

455959c

sfc-gh-dmatthews added security-assessment-completed change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Nov 14, 2025

Lint check

7d4de45

sfc-gh-dmatthews commented Nov 17, 2025

View reviewed changes

frontend/lib/src/components/widgets/Multiselect/Multiselect.test.tsx Outdated Show resolved Hide resolved

sfc-gh-dmatthews added 3 commits November 20, 2025 14:02

Add Select All

ea1b460

Styling

2e92cb6

e2e test update

7280d19

sfc-gh-dmatthews added 4 commits January 7, 2026 22:02

Update select all messages

da3682a

Apply design spec

a4e3a42

Tighten gaps.

a2590a3

Fix scrollbar

1fcb895

sfc-gh-dmatthews mentioned this pull request Jan 15, 2026

Enhancement/update dropdown design #12956 #13004

Merged

sfc-gh-dmatthews added 4 commits January 26, 2026 07:57

Merge branch 'develop' into feature-multiselectall

339c034

Update time input

057f37e

Fix build error

868ec2b

Lint fix

a64bc91

sfc-gh-dmatthews added 4 commits January 26, 2026 09:40

Update snapshots

30dfa34

Missed style update

ca2d9c5

Fix scroll test

8b9fd70

Test

7a5d901

sfc-gh-lwilby reviewed Jan 29, 2026

View reviewed changes

sfc-gh-bnisco reviewed Jan 29, 2026

View reviewed changes

sfc-gh-dmatthews added 4 commits January 30, 2026 08:33

Review edits

5e11f65

Avoid duplicate computation and storage

bb69502

Lint fix

a470e10

Use hover reset helper

ed20b64

sfc-gh-bnisco reviewed Jan 30, 2026

View reviewed changes

sfc-gh-dmatthews added 2 commits January 30, 2026 13:36

Cetralize pseudo options

280774c

Simplify time input gutter to not react to mode change

8a0c1a7

sfc-gh-bnisco reviewed Jan 30, 2026

View reviewed changes

sfc-gh-dmatthews added 3 commits January 30, 2026 14:25

Nudge multiselect placeholder to match selectbox

9056402

Merge branch 'develop' into feature-multiselectall

2b55f28

Reset snapshots to develop

f6f4db1

sfc-gh-dmatthews added the update-snapshots Trigger snapshot autofix workflow label Jan 30, 2026

github-actions bot removed the update-snapshots Trigger snapshot autofix workflow label Jan 30, 2026

github-actions bot mentioned this pull request Jan 30, 2026

[snapshots] Update E2E snapshots for #13015 #13766

Closed

sfc-gh-dmatthews added 6 commits January 30, 2026 15:38

Update snapshots

05bc905

Update snapshots

a303c53

Fix flaky tests

54d611a

Update snapshots

10226bb

Fix drop down width in dark mode

1e0a2a7

Super annoying pixel differences from border

a3e9a8e

sfc-gh-dmatthews added 2 commits January 31, 2026 01:43

Update snapshots

b7ed8b9

Update TODO

a67c541

sfc-gh-dmatthews changed the title ~~[Prototype] Multiselect all matches~~ Select all or select all matches in st.multiselect (plus drop down styling) Feb 1, 2026

sfc-gh-dmatthews commented Feb 2, 2026

View reviewed changes

sfc-gh-dmatthews requested a review from mayagbarnes February 2, 2026 15:56

sfc-gh-dmatthews closed this Feb 6, 2026

Conversation

sfc-gh-dmatthews commented Nov 14, 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)

GitHub Issue Link (if applicable)

Testing Plan

Uh oh!

github-actions bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR preview is ready!

Uh oh!

snyk-io bot commented Nov 14, 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!

jrieke commented Dec 28, 2025

Uh oh!

sfc-gh-dmatthews commented Jan 9, 2026

Uh oh!

github-actions bot commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📉 Frontend coverage change detected

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfc-gh-dmatthews commented Jan 31, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfc-gh-dmatthews commented Feb 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sfc-gh-dmatthews commented Nov 14, 2025 •

edited

Loading

github-actions bot commented Nov 14, 2025 •

edited

Loading

snyk-io bot commented Nov 14, 2025 •

edited

Loading

github-actions bot commented Jan 26, 2026 •

edited

Loading