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

[paternostrox]

If like me you have an issue with this component height (not adjusting the way it should), just add h-auto class to the Command component, it should fix it.

<Command onKeyDown={handleKeyDown} className="overflow-visible bg-transparent h-auto" >

[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

[sovetski]

@abura1han not bad, the problem is that we don't see the selected values without clicking on it...

[uddh4v]

Its nice it whould be great if it comes with search option.

[uddh4v]

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
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 [search, setSearch] = useState("");
const [open, setOpen] = useState(false);

const handleSelectChange = (value: string) => {
if (!selectedItems.includes(value)) {
setSelectedItems((prev) => [...prev, value]);
} else {
setSelectedItems((prev) => prev.filter((item) => item !== value));
}
};

const filteredOptions = values.filter((opt) =>
opt.label.toLowerCase().includes(search.toLowerCase())
);

return (




{selectedItems.length > 0
? values
.filter((opt) => selectedItems.includes(opt.value))
.map((opt) => opt.label)
.join(", ")
: placeholder}





<Input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search..."
/>

{filteredOptions.length > 0 ? (
filteredOptions.map((option, index) => (

<Checkbox
checked={selectedItems.includes(option.value)}
onCheckedChange={() => handleSelectChange(option.value)}
/>
{option.label}

))
) : (

No options found

)}

);
};

export default MultiSelect;
just a modified multiselect with search

[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

[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 ()".

[sovetski]

Why using Command as a base component instead of Combobox?

[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 >
    )
}

[bravo-stack]

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

Works great!

[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

[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

[RoblesF]

How to properly implement this wit react-hook-form?

[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)

[fernandordev]

I use this version, but I modified it slightly to support custom display values and unique IDs. Now, the component accepts a displayValue function to map each unique identifier to its corresponding user-friendly label, ensuring that even items with identical names are treated as distinct. Additionally, unique DOM attributes (and even an invisible identifier element) are injected into each item to guarantee proper hover and selection behavior. This enhancement effectively resolves the issue of multiple items with the same display name being highlighted simultaneously.

import React, { KeyboardEvent, createContext, forwardRef, useCallback, useContext, useState } from 'react';
import { Badge } from '@/components/ui/badge';
import { Command, CommandItem, CommandEmpty, CommandList } from '@/components/ui/command';
import { cn } from '@/lib/utils';
import { Command as CommandPrimitive } from 'cmdk';
import { X as RemoveIcon, Check } from 'lucide-react';

interface MultiSelectorProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {
	values: string[];
	onValuesChange: (value: string[]) => void;
	loop?: boolean;
	displayValue?: (id: string) => string;
}

interface MultiSelectContextProps {
	value: string[];
	onValueChange: (value: string) => void;
	open: boolean;
	setOpen: (value: boolean) => void;
	inputValue: string;
	setInputValue: React.Dispatch<React.SetStateAction<string>>;
	activeIndex: number;
	setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
	ref: React.RefObject<HTMLInputElement | null>;
	handleSelect: (e: React.SyntheticEvent<HTMLInputElement>) => void;
	displayValue?: (id: string) => string;
}

const MultiSelectContext = createContext<MultiSelectContextProps | null>(null);

const useMultiSelect = () => {
	const context = useContext(MultiSelectContext);
	if (!context) {
		throw new Error('useMultiSelect must be used within MultiSelectProvider');
	}
	return context;
};

const MultiSelector = ({
	values: value,
	onValuesChange: onValueChange,
	loop = false,
	className,
	children,
	dir,
	displayValue,
	...props
}: MultiSelectorProps) => {
	const [inputValue, setInputValue] = useState('');
	const [open, setOpen] = useState<boolean>(false);
	const [activeIndex, setActiveIndex] = useState<number>(-1);
	const inputRef = React.useRef<HTMLInputElement>(null);

	const onValueChangeHandler = useCallback(
		(val: string) => {
			if (value.includes(val)) {
				onValueChange(value.filter((item) => item !== val));
			} else {
				onValueChange([...value, val]);
			}
		},
		[value, onValueChange],
	);

	const handleSelect = useCallback((e: React.SyntheticEvent<HTMLInputElement>) => {
		e.preventDefault();
	}, []);

	const handleKeyDown = useCallback(
		(e: KeyboardEvent<HTMLDivElement>) => {
			e.stopPropagation();
			const target = inputRef.current;

			if (!target) return;

			const moveNext = () => {
				const nextIndex = activeIndex + 1;
				setActiveIndex(nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex);
			};

			const movePrev = () => {
				const prevIndex = activeIndex - 1;
				setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);
			};

			const moveCurrent = () => {
				const newIndex = activeIndex - 1 <= 0 ? (value.length - 1 === 0 ? -1 : 0) : activeIndex - 1;
				setActiveIndex(newIndex);
			};

			switch (e.key) {
				case 'ArrowLeft':
					if (dir === 'rtl') {
						if (value.length > 0 && (activeIndex !== -1 || loop)) {
							moveNext();
						}
					} else {
						if (value.length > 0 && target.selectionStart === 0) {
							movePrev();
						}
					}
					break;

				case 'ArrowRight':
					if (dir === 'rtl') {
						if (value.length > 0 && target.selectionStart === 0) {
							movePrev();
						}
					} else {
						if (value.length > 0 && (activeIndex !== -1 || loop)) {
							moveNext();
						}
					}
					break;

				case 'Backspace':
				case 'Delete':
					if (value.length > 0) {
						if (activeIndex !== -1 && activeIndex < value.length) {
							onValueChangeHandler(value[activeIndex]);
							moveCurrent();
						} else {
							if (target.selectionStart === 0) {
								onValueChangeHandler(value[value.length - 1]);
							}
						}
					}
					break;

				case 'Enter':
					setOpen(true);
					break;

				case 'Escape':
					if (activeIndex !== -1) {
						setActiveIndex(-1);
					} else if (open) {
						setOpen(false);
					}
					break;
			}
		},
		[value, activeIndex, loop, dir, onValueChangeHandler, open],
	);

	return (
		<MultiSelectContext.Provider
			value={{
				value,
				onValueChange: onValueChangeHandler,
				open,
				setOpen,
				inputValue,
				setInputValue,
				activeIndex,
				setActiveIndex,
				ref: inputRef,
				handleSelect,
				displayValue,
			}}
		>
			<Command
				onKeyDown={handleKeyDown}
				className={cn('flex flex-col space-y-2 overflow-visible bg-transparent', className)}
				dir={dir}
				{...props}
			>
				{children}
			</Command>
		</MultiSelectContext.Provider>
	);
};

const MultiSelectorTrigger = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, children, ...props }, ref) => {
	const { value, onValueChange, activeIndex, displayValue } = useMultiSelect();

	const mousePreventDefault = useCallback((e: React.MouseEvent) => {
		e.preventDefault();
		e.stopPropagation();
	}, []);

	return (
		<div
			ref={ref}
			className={cn(
				'flex flex-wrap gap-1 rounded-md border border-input bg-transparent px-2 py-2 text-base shadow-sm ring-transparent',
				{ 'ring-1 focus-within:ring-ring': activeIndex === -1 },
				className,
			)}
			{...props}
		>
			{value.map((item, index) => (
				<Badge
					key={item}
					className={cn('flex items-center gap-1', activeIndex === index && 'ring-2 ring-muted-foreground')}
					variant={'outline'}
				>
					<span>{displayValue ? displayValue(item) : item}</span>
					<button
						aria-label={`Remove ${item} option`}
						aria-roledescription='button to remove option'
						type='button'
						onMouseDown={mousePreventDefault}
						onClick={() => onValueChange(item)}
					>
						<span className='sr-only'>Remove {item} option</span>
						<RemoveIcon className='size-3 hover:stroke-destructive' />
					</button>
				</Badge>
			))}
			{children}
		</div>
	);
});
MultiSelectorTrigger.displayName = 'MultiSelectorTrigger';

const MultiSelectorInput = forwardRef<
	React.ElementRef<typeof CommandPrimitive.Input>,
	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => {
	const { setOpen, inputValue, setInputValue, activeIndex, setActiveIndex, handleSelect, ref: inputRef } = useMultiSelect();

	return (
		<CommandPrimitive.Input
			{...props}
			tabIndex={0}
			ref={ref || inputRef}
			value={inputValue}
			onValueChange={activeIndex === -1 ? setInputValue : undefined}
			onSelect={handleSelect}
			onBlur={() => setOpen(false)}
			onFocus={() => setOpen(true)}
			onClick={() => setActiveIndex(-1)}
			className={cn(
				'ml-1 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground',
				className,
				activeIndex !== -1 && 'caret-transparent',
			)}
		/>
	);
});
MultiSelectorInput.displayName = 'MultiSelectorInput';

const MultiSelectorContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ children }, ref) => {
	const { open } = useMultiSelect();
	return (
		<div ref={ref} className='relative'>
			{open && children}
		</div>
	);
});
MultiSelectorContent.displayName = 'MultiSelectorContent';

const MultiSelectorList = forwardRef<
	React.ElementRef<typeof CommandPrimitive.List>,
	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, children }, ref) => {
	return (
		<CommandList
			ref={ref}
			className={cn(
				'scrollbar-thin scrollbar-track-transparent scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg absolute top-0 z-10 flex w-full flex-col gap-2 rounded-md border border-muted bg-background p-2 shadow-md transition-colors',
				className,
			)}
		>
			{children}
			<CommandEmpty>
				<span className='text-muted-foreground'>Nada foi encontrado</span>
			</CommandEmpty>
		</CommandList>
	);
});

MultiSelectorList.displayName = 'MultiSelectorList';

interface MultiSelectorItemProps extends React.ComponentPropsWithoutRef<typeof CommandItem> {
	value: string;
	itemId?: string;
}

const MultiSelectorItem = forwardRef<HTMLDivElement, MultiSelectorItemProps>(({ className, value, itemId, children, ...props }, ref) => {
	const { value: selectedValues, onValueChange, setInputValue } = useMultiSelect();

	const mousePreventDefault = useCallback((e: React.MouseEvent) => {
		e.preventDefault();
		e.stopPropagation();
	}, []);

	const isIncluded = selectedValues.includes(value);
	const uniqueId = `multiselector-item-${itemId || value}`;

	return (
		<CommandItem
			ref={ref}
			{...props}
			id={uniqueId}
			data-item-id={uniqueId}
			data-value={value}
			onSelect={() => {
				onValueChange(value);
				setInputValue('');
			}}
			className={cn(
				'flex cursor-pointer justify-between rounded-md px-2 py-1 transition-colors',
				className,
				isIncluded && 'cursor-default opacity-50',
				props.disabled && 'cursor-not-allowed opacity-50',
			)}
			onMouseDown={mousePreventDefault}
			aria-label={`${children} ${uniqueId}`}
		>
			<span>
				{children}
				<span className='invisible absolute'>{uniqueId}</span>
			</span>
			{isIncluded && <Check className='h-4 w-4' />}
		</CommandItem>
	);
});

MultiSelectorItem.displayName = 'MultiSelectorItem';

export { MultiSelector, MultiSelectorTrigger, MultiSelectorInput, MultiSelectorContent, MultiSelectorList, MultiSelectorItem };

[fernandordev]

Here its how I use:

<MultiSelector
	values={info.fis_segmentos.map((segmento) => segmento.id)}
	onValuesChange={(values) => {
		setInfo({
			...info,
			fis_segmentos: values.map((id) => {
				const segmentoFound = segmentos?.find((seg: SegmentosEmpresasData) => seg.id === id);
				return { id, ds_descricao: segmentoFound?.ds_descricao || '' };
			}),
		});
	}}
	loop
	displayValue={(id) => {
		const found = segmentos?.find((seg: SegmentosEmpresasData) => seg.id === id);
		return found?.ds_descricao || id;
	}}
>
	<MultiSelectorTrigger>
		<MultiSelectorInput placeholder='Selecione' />
	</MultiSelectorTrigger>
	<MultiSelectorContent>
		<MultiSelectorList>
			{segmentos?.map((segmento: SegmentosEmpresasData) => (
				<MultiSelectorItem key={segmento.id} value={segmento.id!} itemId={segmento.id!}>
					{segmento.ds_descricao}
				</MultiSelectorItem>
			))}
		</MultiSelectorList>
	</MultiSelectorContent>
</MultiSelector>

[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

[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

[alexnaish]

Since all of these solutions are copy and paste so you can extend them - that's what Gustavo is saying. You need to do it yourself :)

[hitecSmartHome]

Yeah, I did my version which can accept any kind of object.

[beaupd]

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

[sovetski]

can you share a screenshot or a demo link to see the final result?

[sadmann7]

i built a radix like combobox primitive, with all the accessibility, collision detection, and stuffs.

here is a multi-select built with the combobox multiple mode.

[sebbean]

hell yea nice one @sadmann7 !

[alamenai]

What if I have 100 items ? Do we have show more option ?

[Vic-ong]

I built a multiselect by splitting out the dropdown and the trigger components to extend some customizability

Demo: https://shadcn-components-extend.vercel.app/?component=input-multiselect
Code: https://github.com/Vic-ong/shadcn-components-extend/blob/main/src/components/extend/input-multiselect.tsx

export const MyComponent = () => {
  const [value, setValue] = React.useState<string[]>(["apple"]);
  
  const options = [
    { value: "apple", label: "Apple" },
    // ...
  ];
  
  return (
    <div>
      <InputMultiSelect
        options={options}
        value={value}
        onValueChange={(v) => setValue(v)}
      >
        {(provided) => <InputMultiSelectTrigger {...provided} className="additional-classes" />}
      </InputMultiSelect>
    </div>
  );
};

[yayapao]

I built the async-multi-select with the latest Next.js(v15.2.4) and shadcn/ui.

demo: https://shadcn-multi-async-select.vercel.app/
github: https://github.com/yayapao/shadcn-multi-async-select

[patel-jay14144]

Much needed component

[yayapao]

https://shadcn-multi-async-select.vercel.app/
You can try this

[patel-jay14144]

Thanks!! This helped! but still waiting for a native support for this in the shadcn itself

[pproenca]

@patel-jay14144 a very useful component! Thank you! I'm wondering whether it's something that can be submitted as a block? https://ui.shadcn.com/docs/blocks

So it's easier to find for future users like myself who need this component. Maybe as the adoption from users increases there's enough evidence for the component to be promoted into the main library.

[iazadur]

Check the package : https://www.npmjs.com/package/react-shadcn-multiselect