Multi Select

Component 28

About

A searchable multi-select dropdown with removable animated chips for choosing several options from a list.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Multi Select to your project and fits it to your theme.

Code

How Multi Select is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  MultiSelect,
  MultiSelectContent,
  MultiSelectEmpty,
  MultiSelectGroup,
  MultiSelectInput,
  MultiSelectItem,
  MultiSelectLabel,
  MultiSelectList,
  MultiSelectTrigger,
  MultiSelectValue,
} from "@/components/ui/multi-select";
import { Circle } from "lucide-react";

const colors = {
  design: "fill-rose-500 text-rose-500",
  engineering: "fill-sky-500 text-sky-500",
  product: "fill-amber-500 text-amber-500",
  research: "fill-violet-500 text-violet-500",
  marketing: "fill-emerald-500 text-emerald-500",
  operations: "fill-slate-500 text-slate-500",
};

function Option({
  value,
  children,
}: {
  value: keyof typeof colors;
  children: string;
}) {
  return (
    <MultiSelectItem value={value} textValue={children}>
      <span className="flex items-center gap-2.5">
        <Circle aria-hidden="true" className={`size-2.5 ${colors[value]}`} />
        {children}
      </span>
    </MultiSelectItem>
  );
}

function MultiSelectPreview() {
  return (
    <div className="flex min-h-[420px] w-full items-start justify-center px-4 pt-24">
      <div className="w-full max-w-sm">
        <MultiSelect defaultValue={["design", "engineering"]}>
          <MultiSelectTrigger>
            <MultiSelectValue placeholder="Choose teams" />
            <MultiSelectInput aria-label="Search teams" />
          </MultiSelectTrigger>
          <MultiSelectContent>
            <MultiSelectList ariaLabel="Teams">
              <MultiSelectGroup>
                <MultiSelectLabel>Product teams</MultiSelectLabel>
                <Option value="design">Design</Option>
                <Option value="engineering">Engineering</Option>
                <Option value="product">Product</Option>
                <Option value="research">Research</Option>
              </MultiSelectGroup>
              <MultiSelectGroup>
                <MultiSelectLabel>Business teams</MultiSelectLabel>
                <Option value="marketing">Marketing</Option>
                <Option value="operations">Operations</Option>
              </MultiSelectGroup>
              <MultiSelectEmpty>No teams found.</MultiSelectEmpty>
            </MultiSelectList>
          </MultiSelectContent>
        </MultiSelect>
      </div>
    </div>
  );
}

export default MultiSelectPreview;