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.

[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

[ragunanthan]

Thanks @hsuanyi-chou

[zacBkh]

Hello!
Thanks a lot for that!!

However the selection part of component is showing kind of transparent when I try it out and anything below it will come on top...
I tried replacing the code line 120 as showed in the doc but it's not related.

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

[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

[Workerdroid7-72]

This is nice! How did you do this?

[zahidiqbalnbs]

@sersavan Can you put the 'search options' within PopoverTrigger?

[sersavan]

This is nice! How did you do this?

@Workerdroid7-72
All answers in repo

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