Adding a new multi select component.

[AhmadNasser04]

Basically just the select component but with the ability to select multiple items

[vignesh-gupta]

I think there is Checkbox group variant in Drop down menu component.

Check it out - https://ui.shadcn.com/docs/components/dropdown-menu#examples

[NatanCieplinski]

Here are two examples you might find useful:

• https://github.com/mxkaske/mxkaske.dev/blob/main/components/craft/fancy-multi-select.tsx
• https://craft.mxkaske.dev/post/fancy-multi-select

[tushar-rupani]

https://gist.github.com/tushar-rupani/b59d30d82dfa248814739cb07291f94a

Hey, try this maybe. See if it works according to your requirements.

[abura1han]

https://gist.github.com/tushar-rupani/b59d30d82dfa248814739cb07291f94a

Hey, try this maybe. See if it works according to your requirements.

This one is nice, I did a bit of modification over it, check this out

"use client";

import { Button } from "@/components/ui/button";
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ChevronDown } from "lucide-react";
import { Dispatch, SetStateAction } from "react";

type Option = { label: string; value: string };

interface ISelectProps {
  placeholder: string;
  options: Option[];
  selectedOptions: string[];
  setSelectedOptions: Dispatch<SetStateAction<string[]>>;
}
const MultiSelect = ({
  placeholder,
  options: values,
  selectedOptions: selectedItems,
  setSelectedOptions: setSelectedItems,
}: ISelectProps) => {

  const handleSelectChange = (value: string) => {
    if (!selectedItems.includes(value)) {
      setSelectedItems((prev) => [...prev, value]);
    } else {
      const referencedArray = [...selectedItems];
      const indexOfItemToBeRemoved = referencedArray.indexOf(value);
      referencedArray.splice(indexOfItemToBeRemoved, 1);
      setSelectedItems(referencedArray);
    }
  };

  const isOptionSelected = (value: string): boolean => {
    return selectedItems.includes(value) ? true : false;
  };

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild className="w-full">
          <Button
            variant="outline"
            className="w-full flex items-center justify-between"
          >
            <div>{placeholder}</div>
            <ChevronDown className="h-4 w-4 opacity-50" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent
          className="w-56"
          onCloseAutoFocus={(e) => e.preventDefault()}
        >
          {values.map((value: ISelectProps["options"][0], index: number) => {
            return (
              <DropdownMenuCheckboxItem
                onSelect={(e) => e.preventDefault()}
                key={index}
                checked={isOptionSelected(value.value)}
                onCheckedChange={() => handleSelectChange(value.value)}
              >
                {value.label}
              </DropdownMenuCheckboxItem>
            );
          })}
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  );
};

export default MultiSelect;

This is how you can use it

  const [selectedItems, setSelectedItems] = useState<string[]>([]);

  <MultiSelect
       placeholder="Job types"
       options={[
            { label: "Full-time", value: "full-time" },
            { label: "Part-time", value: "part-time" },
            { label: "Contract", value: "contract" },
            { label: "Remote", value: "remote" },
       ]}
       selectedOptions={selectedItems}
       setSelectedOptions={setSelectedItems}
   />

Demo

[hsuanyi-chou]

I've implemented all the features that React-Select offers, built entirely on Command, which is based on cmdk — no additional packages needed.

You can visit here to see demo and usage.

Features

• Multiple selection, of course.
• Async search with debounce.
• Creatable selector — create option when there is no option matched.
• Grouping functionality.
• Working with react-hook-form.
• Customize your own loading spinner and empty indicator by giving props.
• Customize style with tailwind just like shadcn-ui.
• Fixed options, maximum selected count, max input text length.
• Ability to disable the default selection of the first item. (see more about the cmdk issue)
• Expose ref to get your selections and input to match your needs. For example, input.focus()

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.

---

same reply here

[zacBkh]

I think it's because the css classes bg-popover and text-popover-foreground are not linked to any actual styling instructions. @hsuanyi-chou

[Markkos89]

hey @hsuanyi-chou I'm only having this issue:

From where could I take this components? Thanks in advance!!!

[hsuanyi-chou]

visit here to copy the code.

[shehabadel]

@hsuanyi-chou Thank you so much! I was able to customize it a little bit for my use case to be able to add icons next to options. This should be added to the documentation.

[Desperadosol]

I have an issue with this component. On mobile devices,

if the user decides to scroll the page while the select options are opened (which can easily happen), the options disappear but the keyboard stays open.

Suppose the user tries to enter anything from the keyboard. In that case, the component bugs out and you see the error message: "Application error: a client-side exception has occurred (see the browser console for more information)."

The error then reads: "TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) at Function.from ()".

[ChetSocio]

For new ones: I use multi select component like this:

"use client";

import * as React from "react";
import { X } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import {
    Command,
    CommandGroup,
    CommandItem, CommandList
} from "@/components/ui/command";
import { Command as CommandPrimitive } from "cmdk";

type Framework = Record<"value" | "label", string>;

const FRAMEWORKS = [
    {
        value: "next.js",
        label: "Next.js",
    },
    {
        value: "sveltekit",
        label: "SvelteKit",
    },
    {
        value: "nuxt.js",
        label: "Nuxt.js",
    },
    {
        value: "remix",
        label: "Remix",
    },
    {
        value: "astro",
        label: "Astro",
    }
] satisfies Framework[];

export function FancyMultiSelect() {
    const inputRef = React.useRef<HTMLInputElement>(null);
    const [open, setOpen] = React.useState(false);
    const [selected, setSelected] = React.useState<Framework[]>([FRAMEWORKS[4]]);
    const [inputValue, setInputValue] = React.useState("");

    const handleUnselect = React.useCallback((framework: Framework) => {
        setSelected(prev => prev.filter(s => s.value !== framework.value));
    }, []);

    const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
        const input = inputRef.current
        if (input) {
            if (e.key === "Delete" || e.key === "Backspace") {
                if (input.value === "") {
                    setSelected(prev => {
                        const newSelected = [...prev];
                        newSelected.pop();
                        return newSelected;
                    })
                }
            }
            // This is not a default behaviour of the <input /> field
            if (e.key === "Escape") {
                input.blur();
            }
        }
    }, []);

    const selectables = FRAMEWORKS.filter(framework => !selected.includes(framework));

    return (
        <Command onKeyDown={handleKeyDown} className="overflow-visible bg-transparent">
            <CommandList>

                <div
                    className="group border border-input px-3 py-2 text-sm ring-offset-background rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"
                >
                    <div className="flex gap-1 flex-wrap">
                        {selected.map((framework) => {
                            return (
                                <Badge key={framework.value} variant="secondary">
                                    {framework.label}
                                    <button
                                        className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
                                        onKeyDown={(e) => {
                                            if (e.key === "Enter") {
                                                handleUnselect(framework);
                                            }
                                        }}
                                        onMouseDown={(e) => {
                                            e.preventDefault();
                                            e.stopPropagation();
                                        }}
                                        onClick={() => handleUnselect(framework)}
                                    >
                                        <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
                                    </button>
                                </Badge>
                            )
                        })}
                        {/* Avoid having the "Search" Icon */}
                        <CommandPrimitive.Input
                            ref={inputRef}
                            value={inputValue}
                            onValueChange={setInputValue}
                            onBlur={() => setOpen(false)}
                            onFocus={() => setOpen(true)}
                            placeholder="Select frameworks..."
                            className="ml-2 bg-transparent outline-none placeholder:text-muted-foreground flex-1"
                        />
                    </div>
                </div>
                <div className="absolute w-[320px] lg:w-[500px] mt-2">
                    {open && selectables.length > 0 ?
                        <div className="absolute w-full top-0 z-10 rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
                            <CommandGroup className="h-full z-50 overflow-auto">
                                {selectables.map((framework) => {
                                    return (
                                        <CommandItem
                                            key={framework.value}
                                            onMouseDown={(e) => {
                                                e.preventDefault();
                                                e.stopPropagation();
                                            }}
                                            onSelect={(value) => {
                                                setInputValue("")
                                                setSelected(prev => [...prev, framework])
                                            }}
                                            className={"cursor-pointer"}
                                        >
                                            {framework.label}
                                        </CommandItem>
                                    );
                                })}
                            </CommandGroup>
                        </div>
                        : null}
                </div>
            </CommandList>
        </Command >
    )
}

[sersavan]

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.
https://shadcn-multi-select-component.vercel.app

[yuens1002]

awesome @sersavan. do you think it's easy enough to add the ability to create a selection all in one component?

[sersavan]

@yuens1002
Thank you. I'm not sure I understood your question correctly. If the question is about the ability to select all elements with one click, then such functionality already exists.

[yuens1002]

actually, i'm thinking about adding/creating a selection on the list. currently, you can search for a selection. maybe a way toggle to choose what the input does... to either search or add a selection

[sersavan]

@yuens1002
Ok, maybe) I'll think about it. Thank you.

[GustavoContreiras]

This is really cool but when I used on my app the close icons (from the badge and from the input) stopped working :/
It opens the dropdown when I click.

Edit: A guy already solved that, you need to add "[&_svg]:pointer-events-auto" class to Button component

[sersavan]

This is nice! How did you do this?

@Workerdroid7-72
All answers in repo

[Zonalds]

@sersavan This is the very best!

Thank you.

[Maxx59]

Thank you for this awesome component @sersavan
Can we have an option for only 1 selected element? If we have a selected element and we select another one, the selected one is deselected and replaced by the other one.

[sersavan]

Thank you for this awesome component @sersavan Can we have an option for only 1 selected element? If we have a selected element and we select another one, the selected one is deselected and replaced by the other one.

@Maxx59
It's possible, but I'm not sure it will be used often because this component was designed as a multi-select component.
I'll think about it and maybe implement it

[Maxx59]

@sersavan
The shadcn ui component already exists, but I'd like the same style as the multi select component, but with only one element selected. Thank you

[mani444]

Hi everyone,

I have done it like this for multi select with select all option as well but it is simple jsx.

import * as React from "react";
import { cn } from "@/lib/utils";

import { Check, X, ChevronsUpDown } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Badge } from "@/components/ui/badge";

function MultiSelect({
  options,
  selected,
  onChange,
  placeholder,
  className,
  ...props
}) {
  const [open, setOpen] = React.useState(false);

  const handleUnselect = (item) => {
    onChange(selected.filter((i) => i !== item));
  };
  const handleSelectAll = () => {
    if (selected.length === options.length) {
      onChange([]); // Unselect all if all options are selected
    } else {
      onChange(options.map((option) => option.id)); // Select all if not all options are selected
    }
  };

  return (
    <Popover open={open} onOpenChange={setOpen} {...props}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          // className={`w-full justify-between ${
          //   selected.length > 1 ? "h-full" : "h-10"
          // }`}
          className={`w-[360px] justify-between h-auto `}
          onClick={() => setOpen(!open)}
        >
          <div className="flex gap-1 flex-wrap">
            {selected.length > 0
              ? selected.map((item) => (
                  <Badge
                    variant="primary"
                    key={item}
                    className="mr-1 mb-1 bg-primary text-primary-foreground hover:bg-primary/90"
                    onClick={() => handleUnselect(item)}
                  >
                    {options.find((option) => item === option.id)?.name}
                    <div
                      className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
                      onKeyDown={(e) => {
                        if (e.key === "Enter") {
                          handleUnselect(item);
                        }
                      }}
                      onMouseDown={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                      }}
                      onClick={() => handleUnselect(item)}
                    >
                      <X className="h-3 w-3 text-white hover:text-foreground " />
                    </div>
                  </Badge>
                ))
              : placeholder}
          </div>
          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-full p-0">
        <Command className={className}>
          <CommandInput placeholder="Search ..." />
          <CommandEmpty>No item found.</CommandEmpty>
          <CommandGroup className="max-h-64 overflow-auto">
            <CommandItem onSelect={handleSelectAll}>
              <Check
                className={cn(
                  "mr-2 h-4 w-4",
                  selected.length === options.length
                    ? "opacity-100"
                    : "opacity-0"
                )}
              />
              Select All
            </CommandItem>
            {options.map((option) => (
              <CommandItem
                key={option.id}
                onSelect={() => {
                  onChange(
                    selected.includes(option.id)
                      ? selected.filter((item) => item !== option.id)
                      : [...selected, option.id]
                  );
                  setOpen(true);
                }}
              >
                <Check
                  className={cn(
                    "mr-2 h-4 w-4",
                    selected.includes(option.id) ? "opacity-100" : "opacity-0"
                  )}
                />
                {option.name}
              </CommandItem>
            ))}
          </CommandGroup>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

export { MultiSelect };

And called it like this

  <MultiSelect
                        options={options}
                        selected={selected}
                        onChange={setSelected}
                        className="w-[360px]"
                        placeholder={"Add Team Members"}
                      />

[Qodestackr]

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>
                }
            />

Type '{ name: string; onSearch: (value: string) => Promise<Option[]>; defaultOptions: never[]; creatable: true; groupBy: string; onChange: (options: Option[]) => void; placeholder: string; loadingIndicator: Element; emptyIndicator: Element; }' is not assignable to type 'IntrinsicAttributes & MultipleSelectorProps & RefAttributes'.
Property 'name' does not exist on type 'IntrinsicAttributes & MultipleSelectorProps & RefAttributes'.ts(2322)

Kindly support it

export interface MultipleSelectorProps {
    name?: string;  // Lets extend this for SSR scenarios for those working with Next

[nimeshmaharjan11]

use react hook form's controller

[axelhj]

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.

[mt-deva]

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.

Expanding on this; here's how I did it

// ui/multi-select.tsx

"use client";

import { cn } from "@/lib/utils";
import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons";
import * as React from "react";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "~/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "~/components/ui/popover";
import { Separator } from "~/components/ui/separator";

interface MultiSelectProps {
  title?: string;
  options: {
    label: string;
    value: string;
    icon?: React.ComponentType<{ className?: string }>;
  }[];
  selectedValues: Set<string>;
  onSelectionChange: (selectedValues: Set<string>) => void;
}

export function MultiSelect({
  title,
  options,
  selectedValues,
  onSelectionChange,
}: MultiSelectProps) {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="sm" className="h-8 border-dashed">
          <PlusCircledIcon className="mr-2 h-4 w-4" />
          {title}
          {selectedValues.size > 0 && (
            <>
              <Separator orientation="vertical" className="mx-2 h-4" />
              <Badge
                variant="secondary"
                className="rounded-sm px-1 font-normal lg:hidden"
              >
                {selectedValues.size}
              </Badge>
              <div className="hidden space-x-1 lg:flex">
                {selectedValues.size > 2 ? (
                  <Badge
                    variant="secondary"
                    className="rounded-sm px-1 font-normal"
                  >
                    {selectedValues.size} selected
                  </Badge>
                ) : (
                  options
                    .filter((option) => selectedValues.has(option.value))
                    .map((option) => (
                      <Badge
                        variant="secondary"
                        key={option.value}
                        className="rounded-sm px-1 font-normal"
                      >
                        {option.label}
                      </Badge>
                    ))
                )}
              </div>
            </>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0" align="start">
        <Command>
          <CommandInput placeholder={title} />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup>
              {options.map((option) => {
                const isSelected = selectedValues.has(option.value);
                return (
                  <CommandItem
                    key={option.value}
                    onSelect={() => {
                      const newSelectedValues = new Set(selectedValues);
                      if (isSelected) {
                        newSelectedValues.delete(option.value);
                      } else {
                        newSelectedValues.add(option.value);
                      }
                      onSelectionChange(newSelectedValues);
                    }}
                  >
                    <div
                      className={cn(
                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                        isSelected
                          ? "bg-primary text-primary-foreground"
                          : "opacity-50 [&_svg]:invisible",
                      )}
                    >
                      <CheckIcon className={cn("h-4 w-4")} />
                    </div>
                    {option.icon && (
                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
                    )}
                    <span>{option.label}</span>
                  </CommandItem>
                );
              })}
            </CommandGroup>
            {selectedValues.size > 0 && (
              <>
                <CommandSeparator />
                <CommandGroup>
                  <CommandItem
                    onSelect={() => onSelectionChange(new Set())}
                    className="justify-center text-center"
                  >
                    Clear filters
                  </CommandItem>
                </CommandGroup>
              </>
            )}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

And then usage with react-hook-form

const paymentOptions = [
    { label: "American Express", value: "amex" },
    { label: "Mastercard", value: "mastercard" },
    { label: "Visa", value: "visa" },
    { label: "Cash", value: "cash" },
    { label: "Discover", value: "discover" },
    { label: "Diners Club", value: "diners" },
    { label: "Apple Pay", value: "apple_pay" },
    { label: "Google Pay", value: "google_pay" },
  ];
  
   <FormField
              control={form.control}
              name="paymentOptions"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Payment Options</FormLabel>
                  <FormControl>
                    <MultiSelect
                      title="Payment Options"
                      options={paymentOptions}
                      selectedValues={new Set(field.value)}
                      onSelectionChange={(selectedValues) => {
                        field.onChange(Array.from(selectedValues));
                      }}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

[littlebutt]

shadcn-extension has implemented one, check out here (https://shadcn-extension.vercel.app/docs/multi-select)

[Vishnuvich]

Hi everyone,
I just made a multiple selection field using shadcn combobox component. Check this out https://medium.com/@vishnuksvichu12345/multiple-selection-input-field-with-search-functionality-using-shadcn-ui-c9944b5db647

[nullnullsieben]

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: ***@***.***>

[jakenuts]

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.

[hitecSmartHome]

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.

[GustavoContreiras]

This can easily be solved by a "getOptionValue" and a "getOptionLabel" function to be passed as parameter. I'm working on a SuperSelect component with create, delete, singleselect and multiselect functionalities and Im doing this way. You can use generic type too for better dev experience.

[hitecSmartHome]

Are you refering to the shadcn ui expansion type of multi select?

https://shadcnui-expansions.typeart.cc/docs/multiple-selector

[hitecSmartHome]

Because there is no getOptionValue or getOptionLabel