ui icon indicating copy to clipboard operation
ui copied to clipboard

feat: add multi-select component

Open yeliex opened this issue 1 year ago • 13 comments

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

yeliex avatar Feb 18 '24 09:02 yeliex

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

A member of the Team first needs to authorize it.

vercel[bot] avatar Feb 18 '24 09:02 vercel[bot]

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

vercel[bot] avatar Feb 29 '24 06:02 vercel[bot]

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

shadcn avatar Mar 03 '24 10:03 shadcn

Great work.

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

noetix avatar Mar 29 '24 01:03 noetix

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

leonschwanitz avatar Apr 19 '24 10:04 leonschwanitz

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

yeliex avatar Apr 20 '24 02:04 yeliex

image

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

HamidShaikh1499 avatar May 06 '24 17:05 HamidShaikh1499

https://github.com/shadcn-ui/ui/assets/50068289/769b5724-ff3b-4530-bd40-5d4093521529

CommandList should be there instead of CommandGroup.

HamidShaikh1499 avatar May 07 '24 05:05 HamidShaikh1499

badges can be delete when disabled is this intended?

maouknayo avatar Jun 14 '24 16:06 maouknayo

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

GeoWg avatar Jun 14 '24 17:06 GeoWg

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.

BrendanC23 avatar Jun 14 '24 17:06 BrendanC23