[V0_FILE]typescriptreact:file="multi-select-combobox.tsx" isEdit="true" "use client" import * as React from "react" import { Check, ChevronsUpDown, XCircle } from "lucide-react" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" export type Option = { label: string value: string } type MultiSelectProps = { options: Option[] selected: string[] onChange: (values: string[]) => void placeholder?: string className?: string badgeClassName?: string } export function MultiSelect({ options, selected, onChange, placeholder = "Select items", className, badgeClassName, }: MultiSelectProps) { const [open, setOpen] = React.useState(false) const triggerRef = React.useRef(null) const [visibleSelections, setVisibleSelections] = React.useState([]) const [hiddenCount, setHiddenCount] = React.useState(0) const selectedOptions = React.useMemo( () => options.filter((option) => selected.includes(option.value)), [options, selected], ) const calculateVisibleSelections = React.useCallback(() => { if (!triggerRef.current || selectedOptions.length === 0) { setVisibleSelections([]) setHiddenCount(0) return } const triggerWidth = triggerRef.current.offsetWidth const tempDiv = document.createElement("div") tempDiv.style.visibility = "hidden" tempDiv.style.position = "absolute" tempDiv.style.display = "flex" tempDiv.style.width = `${triggerWidth}px` document.body.appendChild(tempDiv) let totalWidth = 0 let visibleCount = 0 // Add clear button and chevron widths totalWidth += 56 // Approximate width for clear button and chevron for (let i = 0; i < selectedOptions.length; i++) { const badge = document.createElement("div") badge.className = badgeClassName || "px-2 py-1 m-1" badge.innerText = selectedOptions[i].label tempDiv.appendChild(badge) totalWidth += badge.offsetWidth if (totalWidth > triggerWidth - 30) { // Leave space for the +X badge break } visibleCount = i + 1 } document.body.removeChild(tempDiv) setVisibleSelections(selectedOptions.slice(0, visibleCount)) setHiddenCount(Math.max(0, selectedOptions.length - visibleCount)) }, [selectedOptions, badgeClassName]) React.useLayoutEffect(() => { calculateVisibleSelections() }, [calculateVisibleSelections]) React.useEffect(() => { const handleResize = () => calculateVisibleSelections() window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, [calculateVisibleSelections]) const handleSelect = (value: string) => { const newSelected = selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value] onChange(newSelected) } const handleClear = (e: React.MouseEvent) => { e.stopPropagation() onChange([]) } return ( )} No results found. {options.map((option) => ( handleSelect(option.value)}>

{option.label}

))} ) } [V0_FILE]typescriptreact:file="demo.tsx" isMerged="true" isEdit="true" "use client" import { useState } from "react" import { MultiSelect, type Option } from "./multi-select-combobox" const frameworks: Option[] = [ { value: "next.js", label: "Next.js" }, { value: "sveltekit", label: "SvelteKit" }, { value: "nuxt", label: "Nuxt.js" }, { value: "remix", label: "Remix" }, { value: "astro", label: "Astro" }, { value: "wordpress", label: "WordPress" }, { value: "express", label: "Express.js" }, { value: "nest", label: "NestJS" }, { value: "angular", label: "Angular" }, { value: "vue", label: "Vue.js" }, { value: "react", label: "React" }, { value: "laravel", label: "Laravel" }, { value: "django", label: "Django" }, { value: "flask", label: "Flask" }, { value: "rails", label: "Ruby on Rails" }, ] export default function Demo() { const [selected, setSelected] = useState([]) return (

Multi-Select Demo

Select frameworks:

Selected values:

{JSON.stringify(selected, null, 2)}

) } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" isEdit="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) }

About

About