vue-tailwind-searchable-multiselect

Vue Tailwind Searchable MultiSelect

A Vue 3 component for a beautiful, searchable, and multi-select dropdown, styled with Tailwind CSS. Easily tag and filter your selections with a responsive UI and minimal setup.

✨ Features

• ✅ Vue 3 compatible
• 🎯 Built-in search filtering
• 🏷️ Displays selected items as tags
• 📦 Minimal dependencies
• 🎨 Tailwind CSS styled (auto-includes styles)
• 🧠 Keyboard & click-outside support

📦 Installation

npm install vue-tailwind-searchable-multiselect
🚀 Usage
1. Import the component and CSS
js
Copy
Edit
// main.js or inside your component
import MultiSelectDropdown from 'vue-tailwind-searchable-multiselect';
import 'vue-tailwind-searchable-multiselect/dist/style.css';
2. Register the component
js
Copy
Edit
export default {
  components: {
    MultiSelectDropdown
  }
}
3. Use it in your template
vue
Copy
Edit
<MultiSelectDropdown :drop-down-data="dropDownData" />
📋 Props
Prop	Type	Required	Description
dropDownData	Array	✅ Yes	Array of objects like { id, name, value } to display

📌 Example Data Format
js
Copy
Edit
dropDownData: [
  { id: 1, name: 'JohnDoe', value: 'JohnDoe' },
  { id: 2, name: 'JaneSmith', value: 'JaneSmith' },
  { id: 3, name: 'FooBar', value: 'FooBar' }
]
🎨 Customization
The component is styled using Tailwind CSS. You can:

Override styles using custom classes

Use Tailwind’s utility-first approach to theme components globally

✅ Compatibility
Vue 3

Tailwind CSS v3+ or bundled styles included (no Tailwind setup required)

📜 License
MIT

🙌 Author
Made with ❤️ by Your Name

🌐 NPM
📦 vue-tailwind-searchable-multiselect

yaml
Copy
Edit

---

Let me know if you'd like me to:
- Add a GIF demo
- Generate the LICENSE
- Publish a GitHub README with badges (downloads, version, etc.)