Rising Select

A modern, reusable, searchable, and customizable Select Dropdown component built specifically for Vue 3.

Rising Select supports single selection, multiple selection, complete keyboard navigation, fast searching, dynamic colors, custom styling, Font Awesome icons, and Vue's standard v-model API.

✨ Features

• Single & Multiple Selection: Seamlessly switch between single and multi-select modes.
• Searchable: Built-in real-time filter search to easily find options.
• Keyboard Navigation: Full arrow-key, enter, and escape key support.
• Vue 3 standard v-model: Out-of-the-box two-way reactive data binding.
• Custom Styling & Colors: Dynamic theme styling via CSS variables or custom classes.
• Font Awesome Support: Clean UI icons powered by Font Awesome.
• Lightweight & Performant: Designed with Composition API for optimal speed.

📦 Installation

Install the package via your preferred package manager:

npm install rising-select
# or
yarn add rising-select
# or
pnpm add rising-select

(Note: Ensure you have Font Awesome installed in your project if you plan to use the default icon set.)

🚀 Quick Start

Import the component into your Vue 3 SFC script setup:

<script setup>
import { ref } from 'vue'
import { RisingSelect } from 'rising-select'

// Selected value state
const selectedValue = ref(null)

// Define your options list
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Cherry', value: 'cherry' },
]
</script>

<template>
  <div class="app">
    <RisingSelect
      v-model="selectedValue"
      :options="options"
      placeholder="Select a fruit..."
    />
  </div>
</template>

📋 Props API Reference

| Prop Name | Type | Default | Description | | :--- | :--- | :--- | :--- | | modelValue (v-model) | String / Number / Array | null | The bound selected value(s). | | options | Array | [] | List of items to display. | | multiple | Boolean | false | Enables multi-selection tags mode. | | placeholder | String | 'Select Option' | Placeholder text when nothing is selected. | | wrapperBg | String | 'bg-white' | Background Wrapper Color. | | wrapperRounded | String | 'rounded-xl' | Wrapper border radius. | | primaryColor | String | '#000' | Primary theme color value/hex. | | wrapperClass | String | '' | Custom CSS classes for the main wrapper. | | inputClass | String | '' | Custom CSS classes for the inner input element. | | dropdownClass | String | '' | Custom CSS classes for the dropdown menu container. | | optionClass | String | '' | Custom CSS classes for individual dropdown options. | | iconClass | String | 'fa-solid fa-chevron-down' | Font Awesome icon class for the dropdown arrow indicator. |

📝 License

This project is MIT licensed.