Multiple Selector

Forms 4

About

Here is Multiple Selector component

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

Code

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

Usage.tsx

"use client";
import React from "react";
import MultipleSelector, { Option } from "@/components/ui/multiple-selector";

const OPTIONS: Option[] = [
  { label: "nextjs", value: "Nextjs" },
  { label: "React", value: "react" },
  { label: "Remix", value: "remix" },
  { label: "Vite", value: "vite" },
  { label: "Nuxt", value: "nuxt" },
  { label: "Vue", value: "vue" },
  { label: "Svelte", value: "svelte" },
  { label: "Angular", value: "angular" },
  { label: "Ember", value: "ember" },
  { label: "Gatsby", value: "gatsby" },
  { label: "Astro", value: "astro" },
];

const MultipleSelectorControlled = () => {
  const [value, setValue] = React.useState<Option[]>([]);
  return (
    <div className="flex w-full flex-col gap-5 px-10">
      <p className="text-primary">
        Your selection: {value.map((val) => val.label).join(", ")}
      </p>
      <MultipleSelector
        value={value}
        onChange={setValue}
        defaultOptions={OPTIONS}
        placeholder="Select frameworks you like..."
        emptyIndicator={
          <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
            no results found.
          </p>
        }
      />
    </div>
  );
};

export default MultipleSelectorControlled;