Adding a new multi select component. #859
Replies: 11 comments 11 replies
-
I think there is Checkbox group variant in Drop down menu component. Check it out - https://ui.shadcn.com/docs/components/dropdown-menu#examples |
Beta Was this translation helpful? Give feedback.
-
Here are two examples you might find useful: |
Beta Was this translation helpful? Give feedback.
-
https://gist.github.com/tushar-rupani/b59d30d82dfa248814739cb07291f94a Hey, try this maybe. See if it works according to your requirements. |
Beta Was this translation helpful? Give feedback.
-
I've implemented all the features that You can visit here to see demo and usage. Features
The most important: simply copy and paste — the code is yours. I hope the only reason you'll need to dive into the source code is for Tailwind customization. |
Beta Was this translation helpful? Give feedback.
-
For new ones: I use multi select component like this:
|
Beta Was this translation helpful? Give feedback.
-
I've assembled a multi-select component using the native shadcn's components. It's fully in line with design and integrates seamlessly into shadcn's ecosystem. Please, try it out and share your thoughts. |
Beta Was this translation helpful? Give feedback.
-
@Workerdroid7-72 |
Beta Was this translation helpful? Give feedback.
-
Thank you for this awesome component @sersavan |
Beta Was this translation helpful? Give feedback.
-
@Maxx59 |
Beta Was this translation helpful? Give feedback.
-
Hi everyone, I have done it like this for multi select with select all option as well but it is simple jsx.
And called it like this
|
Beta Was this translation helpful? Give feedback.
-
Let me ask a question. Am following through using this component but for server actions I heard we need a "name" in the inputs so that we can work well across with formData. However, the Multiselect does not support such? <MultipleSelector
name="allergyname"
onSearch={async (value) => {
setIsTriggered(true);
const res = await mockSearch(value);
setIsTriggered(false);
return res;
}}
defaultOptions={[]}
creatable
groupBy="group"
onChange={handleSelect}
placeholder="start typing to get more options..."
loadingIndicator={
<p className="py-2 text-center text-lg leading-10 text-muted-foreground">loading...</p>
}
emptyIndicator={
<p className="w-full text-center text-lg leading-10 text-muted-foreground">
no results found.
</p>
}
/>
Kindly support itexport interface MultipleSelectorProps {
name?: string; // Lets extend this for SSR scenarios for those working with Next |
Beta Was this translation helpful? Give feedback.
-
Basically just the select component but with the ability to select multiple items
Beta Was this translation helpful? Give feedback.
All reactions