"use client"; import * as React from "react"; import { motion, AnimatePresence } from "framer-motion"; import { X, Search, ChevronDown, Check } from "lucide-react"; import { cn } from "@/lib/utils"; export type Option = { value: string; label: string; }; type AnimatedMultiSelectProps = { options: Option[]; placeholder?: string; onChange?: (selectedOptions: Option[]) => void; className?: string; maxHeight?: number; }; export function AnimatedMultiSelect({ options, placeholder = "Search...", onChange, className, maxHeight = 300, }: AnimatedMultiSelectProps) { const [isOpen, setIsOpen] = React.useState(false); const [searchValue, setSearchValue] = React.useState(""); const [selectedOptions, setSelectedOptions] = React.useState([]); const [filteredOptions, setFilteredOptions] = React.useState(options); const containerRef = React.useRef(null); const inputRef = React.useRef(null); // Filter options based on search input React.useEffect(() => { const filtered = options.filter( (option) => !selectedOptions.some((selected) => selected.value === option.value) && option.label.toLowerCase().includes(searchValue.toLowerCase()) ); setFilteredOptions(filtered); }, [searchValue, options, selectedOptions]); // Handle selection of an option const handleSelect = (option: Option) => { const newSelectedOptions = [...selectedOptions, option]; setSelectedOptions(newSelectedOptions); setSearchValue(""); onChange?.(newSelectedOptions); inputRef.current?.focus(); }; // Handle removal of a selected option const handleRemove = (option: Option) => { const newSelectedOptions = selectedOptions.filter( (selected) => selected.value !== option.value ); setSelectedOptions(newSelectedOptions); onChange?.(newSelectedOptions); }; // Handle click outside to close dropdown React.useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( containerRef.current && !containerRef.current.contains(event.target as Node) ) { setIsOpen(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, []); return (

{selectedOptions.map((option) => ( {option.label} ))} setSearchValue(e.target.value)} onFocus={() => setIsOpen(true)} placeholder={selectedOptions.length === 0 ? placeholder : ""} className="flex-1 min-w-[120px] bg-transparent border-none outline-none text-foreground placeholder:text-muted-foreground" />

setIsOpen(!isOpen)} className="flex items-center justify-center w-6 h-6 rounded-full hover:bg-muted" > {isOpen && (

{filteredOptions.length > 0 ? ( filteredOptions.map((option) => ( handleSelect(option)} > {option.label} {selectedOptions.some( (selected) => selected.value === option.value ) && } )) ) : (

No options found

)}

); }

Animated Multi-Select

Animated Multi-Select Demo

Selected options:

Install Dependencies