ui
ui copied to clipboard
feat: add multi-select component
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 is attempting to deploy a commit to the shadcn-pro Team on Vercel.
A member of the Team first needs to authorize it.
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 |
Wow. This is really well done. Love the composable API. Adding it to the roadmap.
Great work.
One piece of feedback, I am unable to tab to the component in my app and in the preview docs.
Hey, when is this released? @shadcn We want to use it in our project.
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
i can't select any item from MultiSelect. looks like popover is disabled for selection. i searched and tried to solve it.
https://github.com/shadcn-ui/ui/assets/50068289/769b5724-ff3b-4530-bd40-5d4093521529
CommandList should be there instead of CommandGroup.
badges can be delete when disabled is this intended?
Awesome work!! Do you plan to add a select all option?
This looks amazing! I've got a few suggestions:
- 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.
- 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?
- 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).
- Lists with many items don't scroll.