@trackpilots/searchable-select-dropdown

A searchable, multi-select dropdown component built with React and Tailwind CSS.

✨ Features

• 🔍 Searchable input field
• ✅ Multi-select support
• 🎨 Customizable styles (color, width, height)
• 📱 Fully responsive
• ⚡ Easy to integrate

🚀 Installation

You can install the package using npm or yarn:

Using npm

npm install @trackpilots/searchable-select-dropdown

Using yarn

yarn add @trackpilots/searchable-select-dropdown

Make sure Tailwind CSS is installed in your project.

📌 Usage

1️⃣ Import the Component

import SearchableSelect from "@trackpilots/searchable-select-dropdown";
import "tailwindcss/tailwind.css"; // Ensure Tailwind is included

2️⃣ Use in Your Component

import React, { useState } from "react";
import SearchableSelect from "@trackpilots/searchable-select-dropdown";

const App = () => {
  const options = ["Mahendran Sakthi", "Jagatheesan Madheswarn", "Jefin Rojar Jeyakumar", "Sanjay Sankar", "Jagadeesh Elango"];
  const [selectedValues, setSelectedValues] = useState([]);

  const handleSelectionChange = (values) => {
    console.log("Selected values:", values);
    setSelectedValues(values);
  };

  return (
    <div className="p-4">
      <SearchableSelect 
        options={options} 
        selectedOptions={selectedValues} 
        onChange={handleSelectionChange} 
        searchPlaceholder="Search...",
        placeholder="Search..." 
        checkboxColor="#9D55FF" 
        checkboxSize="20px" 
      />
      <p className="mt-4">Selected: {selected.join(", ")}</p>
    </div>
  );
};

export default App;

🔧 Props

📌 Maintainers

These packages are maintained by Quick App Studio Developers.

📄 License

This project is licensed under the MIT License.