Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add multi-select component #2773

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

yeliex
Copy link

@yeliex yeliex commented Feb 18, 2024

This PR created another multi-select component following the radix and shadcn-ui design pattern.

Why another component compare to #1616 :

  • This PR following the radix and shadcn-ui design pattern, provides atomic components than an all-in-on component. This makes it possible to overwrite and custom
  • Supports controllable search and remote data
  • Supports max select count limit and max display length

Currently I alternative this with the Command component for reusing styles, it may takes better performance and user experience if we can remove it in the future, and alternative tag mode (input directly in trigger like antd)

This component alternative has been used in my company's production for 2 months and works well with about 20 pages. Now we feedback to the community, hope it helps

Copy link

vercel bot commented Feb 18, 2024

@yeliex is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

Copy link

vercel bot commented Feb 29, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 4, 2024 5:23am

@shadcn
Copy link
Collaborator

shadcn commented Mar 3, 2024

Wow. This is really well done. Love the composable API. Adding it to the roadmap.

@shadcn shadcn added new component area: roadmap This looks great. We'll add it to the roadmap, review and merge. labels Mar 3, 2024
@noetix
Copy link

noetix commented Mar 29, 2024

Great work.

One piece of feedback, I am unable to tab to the component in my app and in the preview docs.

@leonschwanitz
Copy link

Hey, when is this released? @shadcn We want to use it in our project.

@yeliex
Copy link
Author

yeliex commented Apr 20, 2024

Hey, when is this released? @shadcn We want to use it in our project.

you can just add raw file to your project and edit it as your like, it matches this library's like. currently i has no free time to add tab support and there still has other options for maintainer

@HamidShaikh1499
Copy link

image

i can't select any item from MultiSelect. looks like popover is disabled for selection. i searched and tried to solve it.

@HamidShaikh1499
Copy link

2024-05-07.10-44-22.mp4

CommandList should be there instead of CommandGroup.

@maouknayo
Copy link

badges can be delete when disabled is this intended?

@GeoWg
Copy link

GeoWg commented Jun 14, 2024

Awesome work!!
Do you plan to add a select all option?

@BrendanC23
Copy link

This looks amazing! I've got a few suggestions:

  1. In the first example here (the one without a filter), clicking the input and typing a letter does not move focus to that item. Compare this behavior to the select component.
  2. Currently, there's not much distinction between an un-selectable group label and the elements of the group (particularly when the group name is "React" and there is an element named "React"). What about adding something like bold, italics, or underline to make these easier to distinguish?
  3. I would love an option to display the multi-select without the tags. Just show the selected item (if there is only one item selected), or "N items selected" (if there are multiple items selected).
  4. Lists with many items don't scroll.

@Ali-Hussein-dev
Copy link

When will this PR be merged @shadcn?

@ilbertt ilbertt mentioned this pull request Dec 17, 2024
@sovetski
Copy link

@shadcn Any updates please? a lot of developer are waiting for this..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: roadmap This looks great. We'll add it to the roadmap, review and merge. new component
Projects
None yet
Development

Successfully merging this pull request may close these issues.