[combobox][select] List header with "Select all visible"

[Stusu]

Feature request

Summary

I'd like to request support for a built-in way to render a "Select all visible" option so selecting mutlitple options can be done with 1 click on top pinned item in Combobox list.
My suggestion is to add new components - ListHeader and SelectAll so usage may look like this:

<Combobox.List>
  <Combobox.ListHeader>
    <Combobox.SelectAll />
  </Combobox.ListHeader>
  <Combobox.Collection>
  {(item) => (
    <Combobox.Item value={item}>
      {item.label}
    </Combobox.Item>
  )}
  </Combobox.Collection>
</Combobox.List>

Examples in other libraries

Prime React

Motivation

I'm trying to create a combobox with top pinned option that changes selection for all visible options.

I was able to achive that behaviour with controlled api and some additional context, but I think it would be nice to have same functionality out of the box and for uncontrolled component as well.

[soheilnikroo]

Thanks for the detailed request @Stusu — I try to match a common pattern (PrimeReact-style “select all visible”).

I’m working on this in #4962 and started with Combobox.SelectAll, which:

Works in multiple modes (controlled and uncontrolled)
Toggles all currently filtered / visible items (respects the combobox filter)
Exposes checked, indeterminate, and disabled for styling (data-checked, data-indeterminate, etc.)
Uses role="checkbox" and aria-checked for accessibility
Proposed usage — place it above the list inside the popup (pinned header row):

<Combobox.Root items={items} multiple>
  {/* ... */}
  <Combobox.Popup>
    <Combobox.SelectAll />
    <Combobox.List>
      {(item) => (
        <Combobox.Item value={item}>{item.label}</Combobox.Item>
      )}
    </Combobox.List>
  </Combobox.Popup>
</Combobox.Root>

I didn’t add Combobox.ListHeader yet, to keep the PR smaller. A plain wrapper (

) or your own styled row above <Combobox.List> should be enough to pin the control. If you still want a first-class ListHeader inside <Combobox.List> (as in your example), that’s a good follow-up — happy to discuss whether it should be layout-only or tied to list semantics (keyboard nav, virtualized lists, etc.).

[mj12albert]

@Stusu You can achieve this in userland: https://stackblitz.com/edit/cthmvuwz?file=src%2FApp.tsx

Combobox.List is a real role="listbox" so it can't contain anything other than real options, so we need to hack a Combobox.Item for this.

Not sure if we could have actual support for this as it would deviate from the ARIA combobox pattern though. The closest is this footnote from listbox:

If selecting or unselecting all options is an important function, implementing separate controls for these actions, such as buttons for "Select All" and "Unselect All", significantly improves accessibility.

[soheilnikroo]

@mj12albert Thanks for the Stackblitz — the Item + filteredItems approach makes sense for a select-all row inside the listbox.

This PR doesn’t put select-all inside List: Combobox.SelectAll is a role="checkbox" button sibling to List in Popup, aligned with the listbox footnote about separate controls, and it doesn’t add a sentinel item to value.

Happy to narrow to docs-only / the Item pattern if you’d prefer not to ship a new part.

[aarongarciah]

@soheilnikroo it's better to have some common terms in the discussion before opening a PR that might not get reviewed/merged. It might seem like a minor thing, but increasing the API surface of a Base UI component is a big deal; we don't do that slightly.

In your PR, the newly added Combobox.SelectAll checkbox is not accessible.

[soheilnikroo]

Thanks @aarongarciah — fair points on both counts.

I should have discussed this on the issue before opening a PR; I’m still learning Base UI’s process and didn’t treat the API surface with the care it deserves.

I’ll close the PR unless you’d rather I narrow it to docs for the userland Item approach. Sorry for the noise, and thanks for the accessibility callout — happy to learn what specifically didn’t work in your testing if you can share.