primitives Feat: Multiple Selection Support

Feature request

Overview

Dear radix-ui team,

I love using the Select primitive in radix-ui, but I have a feature request. Currently, the Select component allows single-item selection only. I kindly request adding support for multiple selection, as it would significantly enhance its usability.

Examples in other libraries

Native select

<select id="multiSelect" multiple>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
  <option value="option5">Option 5</option>
</select>

Many other libraries, etc.: react-select material-ui ...

Who does this impact? Who is this for?

Users can select multiple items at once, saving time and effort. Developers can use the Select primitive for efficient data filtering by allowing users to select multiple options. Many users are already accustomed to multi-select functionality, making the component more intuitive.

Thank you for considering this feature request! 🙏 Your dedication to improving radix-ui is truly appreciated. 🚀 Looking forward to seeing the library become even more versatile and user-friendly with multiple selection support. If you have any questions or need further input, please don't hesitate to reach out. Keep up the fantastic work! 👍😊

Jul 26 '23 15:07 kimskovhusandersen

I would like to +1 this feature request.

It would be great to have an element that

has feature parity with the builtin <select multiple> element, with regard to keyboard behavior in particular (I'll expand below)
has all the Radix UI goodness in terms of composability and stylability
perhaps also has a nicer API for accessing the selected options compared to the builtin <select multiple>'s API :)

Use case / who is this for?

This primitive / element will enable UIs where users can perform bulk actions on multiple items at once. Examples include

Selecting multiple todos in a todo list app to delete / move to a new list / favourite
Selecting multiple tabs in a chrome extension to close / move to a new window / bookmark
Selecting multiple songs in a music app to add to a playlist / delete from a playlist / favourite

This pattern is common in many native apps, most notably every native file manager (Windows Explorer, Finder, etc). These apps allows you to select multiple files in order to perform actions (open / copy /cut / move/ delete, etc) on multiple files.

Keyboard goodness of builtin `<select multiple>`

Crucially (for me 😁), native apps and the builtin <select multiple> have a great keyboard experience for powerusers. You can do the following:

press DOWN / UP to select the next/previous item
press SHIFT + DOWN / UP to expand the selection to include both the currently selected and the next / previous item
press CMDorCTRL + DOWN / UP to move the active item down / up without modifying the selected items
press SPACE to toggle the selected state of the current active item.
Mouse actions: You can also do CMDorCTRL and click to select multiple items using the mouse, or SHIFT + click to select a range of items.

Shortcomings of existing implementations in other libraries

The builtin <select multiple> has all the keyboard goodness, but is not styleable and customisable

Various other libraries, including react select, Material UI and even Tanstack React Table provide versions of the select multiple pattern, and are headless or provide ways of showing custom UIs, but none of them (that I have found) have the keyboard goodness described above.