Adding a new multi select component. #859
Replies: 18 comments 31 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.
-
I just wanted to share that I've referred to the examples source as found here (See the filter button widgets. It appears to support basic mulstiselect & free-text filtering by using a combination of Popover and the Command-component.) I rendered the CommandInput which makes the options searchable by free-text automatically. I found it to be quite neat. |
Beta Was this translation helpful? Give feedback.
-
shadcn-extension has implemented one, check out here (https://shadcn-extension.vercel.app/docs/multi-select) |
Beta Was this translation helpful? Give feedback.
-
Hi everyone, |
Beta Was this translation helpful? Give feedback.
-
https://www.instagram.com/1900_officelle?igsh=MW5ueDI0b21qbW44Zg==
Vishnu Surendran ***@***.***> schrieb am Mo., 5. Aug. 2024,
12:43:
… Hi everyone,
I just made a multiple selection field using shadcn combobox component.
Check this out
***@***.***/multiple-selection-input-field-with-search-functionality-using-shadcn-ui-c9944b5db647
—
Reply to this email directly, view it on GitHub
<#859 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BIO77CMGGAEYIIPRGCBRCQDZP5JNDAVCNFSM6AAAAAA2ATQMLOVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMRUGE4TENY>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
When someone brings all the incredible beauty and features of Fomantic-UI's dropdown (multi select search perfection) to a a headless framework with svelte/vue/react adapters I will make a small shrine to their devine spirit. |
Beta Was this translation helpful? Give feedback.
-
All of these implementations have a big problem. I can't throw any array at them. The items must have specific fields like label and value. We have to make a multi select component which can accept any data since the data will not have label and value field without mutating it. |
Beta Was this translation helpful? Give feedback.
-
Sharing my solution: "use client"
import * as React from "react"
import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { xor } from "lodash"
type Checked = DropdownMenuCheckboxItemProps["checked"]
export function SimpleMultiSelect({
fields,
setFields,
options,
}: {
fields: string[]
setFields: (fields: string[]) => void
options: string[]
}) {
const [open, setOpen] = React.useState(false)
return (
<DropdownMenu open={open} onOpenChange={(open) => setOpen(open)}>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
className="w-full flex items-center justify-start"
>
{fields?.join(", ")}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width] max-h-[ --radix-dropdown-menu-trigger-available-height]">
{options?.map((o, i) => (
<DropdownMenuCheckboxItem
key={i}
checked={fields?.includes(o)}
onCheckedChange={(checked) =>
setFields(xor([o], fields))
}
onSelect={(e) => e.preventDefault()}
>
{o}
</DropdownMenuCheckboxItem>
))}
</DropdownMenuContent>
</DropdownMenu>
)
} |
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