⚽ Live Match: WordPress/gutenberg/pull/

mirka · 2026-07-28T11:55:15Z

What?

Adds a SearchableChipSelect form primitive to @wordpress/ui.

Why?

The design system needs a searchable multi-select control with chip-based selection state. This builds on the existing Combobox primitives and will support a higher-level control wrapper later.

How?

Add the SearchableChipSelect primitive, composing Combobox subcomponents with InputLayout for the chip input chrome.

Testing Instructions

Run Storybook and open Design System / Components / Form / Primitives / SearchableChipSelect.
Check the Default story with pre-selected chips: the container should grow to fit chips and the search input, with the placeholder sitting inside the border.
Try searching, selecting, and removing chips.
Check the Creatable, WithCustomChipsAndItems, WithCustomEmptyContent, and WithoutClearButton stories.
Toggle WordPress global CSS in the Storybook toolbar and confirm the component still looks correct.

Screenshots

github-actions · 2026-07-28T12:00:09Z

Size Change: 0 B

Total Size: 7.76 MB

_{compressed-size-action}

github-actions · 2026-07-28T12:29:40Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: simison <simison@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

simison · 2026-07-29T13:01:42Z

Doesn't need solving in this PR as it's a bit of an edge case, but likely would need a follow-up:

Reminded me about the need for a Truncation component (#77391). Depending on content, consumer might want to wrap or truncate in different ways, for example at the end vs in the middle for text/domains/emails.

simison · 2026-07-29T13:21:16Z

+				onValueChange={ ( values: typeof ITEMS, event ) => {
+					if ( values.some( ( item ) => item.value === 'create' ) ) {
+						// eslint-disable-next-line no-alert
+						alert( `Create new item: '${ inputValue }'` );


Just had a thought to use prompt() instead of alerting empty when nothing was entered, but how it's now is fine too for the sake of the demo.

simison

I'm not deeply familiar with combobox components (which I know can have lots of complexity) so you might want second thoughts, but overall this looks, feels and works well for me. I tested with Chrome & Firefox, desktop and mobile.

What should I expect from keyboard navigation for a component like this? Should each chip and "clear all" button be accessible by keyboard, or would I be expecting to navigate contents via the dropdown list only?

Design-wise only oddity to me is how when popover is above search input, it covers the chips and casts a shadow over search text:

...but also nice to have it with close proximity to search.

Below -version looks good as-is:

Co-authored-by: Mikael Korpela <mikael@ihminen.org>

mirka · 2026-07-29T21:12:15Z

Design-wise only oddity to me is how when popover is above search input, it covers the chips and casts a shadow over search text

Great catch. This will be addressed in 473bc59, after adding an InputGroup subcomponent (#80869).

mirka · 2026-07-29T21:27:46Z

What should I expect from keyboard navigation for a component like this? Should each chip and "clear all" button be accessible by keyboard, or would I be expecting to navigate contents via the dropdown list only?

We don't have an APG pattern for multiselect comboboxes unfortunately. But as I understand it, all features are accessible by keyboard, if not with the exact same mechanisms as a mouse. Chips are navigable by arrow keys, deletable by the delete key, and the Clear All function is available through the escape key. The Clear All button not being focusable is a bit quirky, but I guess that's how it works in a standard <input type="search"> too. If anything, I was wondering if we should or shouldn't show the Clear All button at all. We'll see.

mirka · 2026-07-29T21:51:48Z

Doesn't need solving in this PR as it's a bit of an edge case, but likely would need a follow-up:

I'll keep it breakable for now:

Mamaduka · 2026-07-30T05:47:52Z

Looking forward to this.

As an experiment, I migrated FlatTermSelector to use the new Combobox, and I'm quite happy with the results. The SearchableChipSelect should reduce the boilerplate.

For async search, is there a plan to support a standardized way to handle "loading state"? Base UI suggests using Combobox.Status, but it's not exposed by our UI library.

mirka · 2026-07-30T08:27:15Z

For async search, is there a plan to support a standardized way to handle "loading state"? Base UI suggests using Combobox.Status, but it's not exposed by our UI library.

Mm, thanks for the call out. I'll add them in.

# Conflicts: # packages/ui/CHANGELOG.md

mirka · 2026-07-30T12:54:54Z

Design-wise only oddity to me is how when popover is above search input, it covers the chips and casts a shadow over search text

This is now fixed.

github-actions · 2026-07-30T13:05:15Z

Flaky tests detected in 0ade97a.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/30542698930
📝 Reported issues:

[Flaky Test] Should insert content using the global inserter #78924 in /test/e2e/specs/widgets/editing-widgets.spec.js
[Flaky Test] should insert media, convert to blocks, and undo in one step #36123 in /test/e2e/specs/editor/blocks/classic.spec.js

mirka added 3 commits July 24, 2026 07:26

Add SearchableChipSelect form primitive to @wordpress/ui

c6aee01

Fix styles

ac6c753

Fix subcomponent keys in Storybook

487370e

mirka self-assigned this Jul 28, 2026

github-actions Bot added the [Package] UI /packages/ui label Jul 28, 2026

mirka added the [Type] Enhancement A suggestion for improvement. label Jul 28, 2026

mirka mentioned this pull request Jul 28, 2026

Components: New form primitives #74178

Open

17 tasks

mirka added 4 commits July 28, 2026 21:15

Simplify SearchableChipSelect tests

b4f8fba

Add changelog

03acb0b

Fix up

8c333b4

Merge branch 'trunk' into add-ui-searchable-chip-select

fee9170

mirka marked this pull request as ready for review July 28, 2026 12:29

mirka requested a review from a team as a code owner July 28, 2026 12:29

simison reviewed Jul 29, 2026

View reviewed changes

Comment thread packages/ui/src/form/primitives/searchable-chip-select/stories/index.story.tsx

simison reviewed Jul 29, 2026

View reviewed changes

simison approved these changes Jul 29, 2026

View reviewed changes

mirka and others added 2 commits July 30, 2026 05:44

Hide items control

37bc6d6

Co-authored-by: Mikael Korpela <mikael@ihminen.org>

Add InputGroup wrapper

473bc59

mirka mentioned this pull request Jul 29, 2026

UI: Add Combobox.InputGroup primitive #80869

Merged

Break long chips

64720a4

Merge branch 'trunk' into add-ui-searchable-chip-select

0ade97a

# Conflicts: # packages/ui/CHANGELOG.md

mirka requested a review from desrosj as a code owner July 30, 2026 12:28

mirka enabled auto-merge (squash) July 30, 2026 12:55

mirka merged commit 514d0f0 into trunk Jul 30, 2026
63 checks passed

mirka deleted the add-ui-searchable-chip-select branch July 30, 2026 13:03

github-actions Bot added this to the Gutenberg 23.8 milestone Jul 30, 2026

mirka mentioned this pull request Jul 30, 2026

SearchableChipSelectControl: Add form control to @wordpress/ui #80980

Merged

Navigation Menu

Uh oh!

SearchableChipSelect: Add form primitive to @wordpress/ui - #80779

SearchableChipSelect: Add form primitive to @wordpress/ui#80779
mirka merged 11 commits into
trunkfrom
add-ui-searchable-chip-select

mirka commented Jul 28, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 28, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 28, 2026 •

edited

Loading

Uh oh!

Uh oh!

simison commented Jul 29, 2026 •

edited

Loading

Uh oh!

simison Jul 29, 2026

Uh oh!

simison left a comment

Uh oh!

mirka commented Jul 29, 2026

Uh oh!

mirka commented Jul 29, 2026

Uh oh!

mirka commented Jul 29, 2026

Uh oh!

Mamaduka commented Jul 30, 2026

Uh oh!

mirka commented Jul 30, 2026

Uh oh!

mirka commented Jul 30, 2026

Uh oh!

Uh oh!

github-actions Bot commented Jul 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

mirka commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Screenshots

Uh oh!

github-actions Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

simison commented Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

simison Jul 29, 2026

Choose a reason for hiding this comment

Uh oh!

simison left a comment

Choose a reason for hiding this comment

Uh oh!

mirka commented Jul 29, 2026

Uh oh!

mirka commented Jul 29, 2026

Uh oh!

mirka commented Jul 29, 2026

Uh oh!

Mamaduka commented Jul 30, 2026

Uh oh!

mirka commented Jul 30, 2026

Uh oh!

mirka commented Jul 30, 2026

Uh oh!

Uh oh!

github-actions Bot commented Jul 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mirka commented Jul 28, 2026 •

edited

Loading

github-actions Bot commented Jul 28, 2026 •

edited

Loading

github-actions Bot commented Jul 28, 2026 •

edited

Loading

simison commented Jul 29, 2026 •

edited

Loading