vue-fuzzy-select

A lightweight fuzzy-search select component for Vue 3.

Installation

npm install vue-fuzzy-select

Usage

<script setup>
import { ref } from 'vue'
import FuzzySelect from 'vue-fuzzy-select'
import 'vue-fuzzy-select/style.css'

const value = ref('')

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

<template>
  <FuzzySelect v-model="value" :options="options" />
</template>

Props

| Prop | Type | Default | Description | | ------------------- | ---------------------- | ------------ | ------------------------------------ | | modelValue | string | — | Currently selected value (v-model) | | options | FuzzySelectOption[] | — | List of options to display | | placeholder | string | 'Select...'| Trigger placeholder text | | searchPlaceholder | string | 'Search...'| Search input placeholder text |

interface FuzzySelectOption {
  value: string
  label: string
}

Keyboard Navigation

| Key | Action | | ---------- | ----------------------------- | | ↓ / ↑ | Move highlight down / up | | Enter | Select highlighted option | | Escape | Close the dropdown |

Customisation

The component uses CSS custom properties for styling. Override them on a parent element or :root:

:root {
  --fuzzy-select-bg: #f5f5f3;
  --fuzzy-select-surface: #ffffff;
  --fuzzy-select-border: #e2e2de;
  --fuzzy-select-radius: 6px;
  --fuzzy-select-text: #111110;
  --fuzzy-select-muted: #6f6e69;
  --fuzzy-select-accent: #1a7fa8;
}

License

MIT