"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@/lib/utils";

export interface MultiSelectOption {
  label: string;
  value: string;
  description?: string;
  disabled?: boolean;
}

export interface MultiSelectProps {
  options: MultiSelectOption[];
  value?: string[];
  defaultValue?: string[];
  onChange?: (value: string[]) => void;
  placeholder?: string;
  className?: string;
  maxDisplay?: number;
  disabled?: boolean;
  label?: string;
}

export function MultiSelect({
  options,
  value,
  defaultValue = [],
  onChange,
  placeholder = "Select options",
  className,
  maxDisplay = 2,
  disabled = false,
  label,
}: MultiSelectProps) {
  const [open, setOpen] = React.useState(false);
  const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue);
  const containerRef = React.useRef<HTMLDivElement>(null);

  const isControlled = value !== undefined;
  const selected = isControlled ? value ?? [] : internalValue;

  const updateValue = React.useCallback(
    (nextValue: string[]) => {
      if (!isControlled) {
        setInternalValue(nextValue);
      }
      onChange?.(nextValue);
    },
    [isControlled, onChange]
  );

  const toggleOption = (optionValue: string) => {
    const exists = selected.includes(optionValue);
    const nextValue = exists
      ? selected.filter((val) => val !== optionValue)
      : [...selected, optionValue];
    updateValue(nextValue);
  };

  const handleOutsideClick = React.useCallback(
    (event: MouseEvent) => {
      if (!containerRef.current) return;
      if (!containerRef.current.contains(event.target as Node)) {
        setOpen(false);
      }
    },
    []
  );

  React.useEffect(() => {
    if (!open) return;
    document.addEventListener("mousedown", handleOutsideClick);
    return () => document.removeEventListener("mousedown", handleOutsideClick);
  }, [open, handleOutsideClick]);

  const selectedOptions = options.filter((option) => selected.includes(option.value));
  const visibleOptions = selectedOptions.slice(0, maxDisplay);
  const overflowCount = selectedOptions.length - visibleOptions.length;

  return (
    <div ref={containerRef} className={cn("relative", className)}>
      {label && (
        <label className="mb-2 block text-sm font-medium text-foreground">
          {label}
        </label>
      )}
      <button
        type="button"
        disabled={disabled}
        onClick={() => setOpen((prev) => !prev)}
        className={cn(
          "flex w-full items-center justify-between gap-3 rounded-lg border border-input bg-background px-4 py-2.5 text-left text-sm",
          "transition-all duration-200",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background",
          "disabled:cursor-not-allowed disabled:opacity-50"
        )}
        aria-haspopup="listbox"
        aria-expanded={open}
      >
        <div className="flex flex-wrap items-center gap-2">
          {selectedOptions.length === 0 ? (
            <span className="text-muted-foreground">{placeholder}</span>
          ) : (
            visibleOptions.map((option) => (
              <span
                key={option.value}
                className="flex items-center gap-1 rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-foreground"
              >
                {option.label}
              </span>
            ))
          )}
          {overflowCount > 0 && (
            <span className="rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">
              +{overflowCount}
            </span>
          )}
        </div>
        <motion.svg
          className="h-4 w-4 text-muted-foreground"
          viewBox="0 0 20 20"
          fill="none"
          stroke="currentColor"
          strokeWidth={2}
          animate={{ rotate: open ? 180 : 0 }}
          transition={{ duration: 0.2 }}
        >
          <path d="M6 8l4 4 4-4" strokeLinecap="round" strokeLinejoin="round" />
        </motion.svg>
      </button>

      <AnimatePresence>
        {open && !disabled && (
          <motion.div
            role="listbox"
            aria-multiselectable="true"
            className="absolute z-50 mt-2 w-full rounded-lg border border-border bg-popover p-2 shadow-lg"
            initial={{ opacity: 0, y: -8, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -6, scale: 0.98 }}
            transition={{ duration: 0.2 }}
          >
            <div className="max-h-64 overflow-auto">
              {options.map((option) => {
                const isSelected = selected.includes(option.value);
                return (
                  <button
                    key={option.value}
                    type="button"
                    role="option"
                    aria-selected={isSelected}
                    disabled={option.disabled}
                    onClick={() => toggleOption(option.value)}
                    className={cn(
                      "flex w-full items-center justify-between rounded-md px-3 py-2 text-sm",
                      "transition-colors duration-150",
                      isSelected
                        ? "bg-accent text-accent-foreground"
                        : "text-foreground hover:bg-muted",
                      option.disabled && "cursor-not-allowed opacity-50"
                    )}
                  >
                    <div className="flex flex-col items-start gap-0.5">
                      <span className="font-medium">{option.label}</span>
                      {option.description && (
                        <span className="text-xs text-muted-foreground">
                          {option.description}
                        </span>
                      )}
                    </div>
                    <motion.span
                      className={cn(
                        "flex h-5 w-5 items-center justify-center rounded-full border border-input",
                        isSelected
                          ? "bg-primary text-primary-foreground"
                          : "bg-background text-transparent"
                      )}
                      animate={{ scale: isSelected ? 1 : 0.9 }}
                      transition={{ duration: 0.15 }}
                    >
                      <svg
                        viewBox="0 0 12 12"
                        className="h-3 w-3"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth={2}
                      >
                        <path
                          d="M2.5 6.25l2.25 2.25 4.75-4.75"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                    </motion.span>
                  </button>
                );
              })}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}
Multi Select

Dependencies

Files

Installation
