✨ Now with Svelte 5 Runes

Svelte Perfect Select v3.2.0

The most advanced select component for Svelte 5. Virtual scrolling, drag-drop, fuzzy search, group selection, avatar support, and WCAG AAA accessibility. Zero dependencies, 100% customizable.

🚀 Explore v3.x Features ⭐ GitHub 📦 npm

What's New in v3.x 🎉

The biggest release ever with 12 major new features

⚡

Virtual Scrolling

v3.0.0

Handle 10,000+ options smoothly with true virtualization

🎯

Drag & Drop

v3.0.0

Reorder multi-select tags with visual feedback

⌨️

Command Palette

v3.0.0

Cmd/Ctrl+K style centered modal interface

🔍

Fuzzy Search

v3.0.0

Smart approximate matching algorithm

📋

Copy/Paste

v3.0.0

Clipboard integration for multi-select

📱

Touch Gestures

v3.0.0

Swipe-to-remove tags on mobile

📁

Collapsible Groups

v3.0.0

Click to expand/collapse option groups

🎨

Custom Templates

v3.0.0

Render Svelte 5 snippets for options

♿

WCAG AAA

v3.0.0

Enhanced accessibility with live regions

🔍

Search Highlighting

v3.1.0

Matched text highlighted in yellow as you type

📍

Auto Position

v3.1.0

Smart dropdown positioning based on viewport

📝

Option Descriptions

v3.1.0

Show subtitle descriptions for options

☑️

Group Selection

v3.2.0

Select or deselect entire groups with a single click

👤

Native Avatars

v3.2.0

Display circular avatars in options and tags

🏷️

Floating Label

v3.2.0

Material Design-style animated placeholder

View Live Demos →

Quick Start

1. Install

npm install svelte-perfect-select

⚠️ Requires Svelte 5.0.0 or later. For Svelte 4, use v2.2.1.

2. Use in your Svelte 5 app

<script>
  import Select from 'svelte-perfect-select';

  let value = $state(null);
  let options = [
    { id: '1', label: 'Option 1', value: '1' },
    { id: '2', label: 'Option 2', value: '2' }
  ];
</script>

<Select {options} bind:value placeholder="Select..." />

3. Enjoy! 🎉

Check out the v3.0.0 features page for advanced examples.

Core Features

🎨

7 Color Themes

Beautiful pre-built themes: blue, purple, green, red, orange, pink, dark

🔄

React-Select Compatible

Familiar API for developers coming from React ecosystem

🌐

Async Loading

Load options dynamically with caching

✨

Creatable

Allow users to create new options

📦

Grouping & Badges

Organize options with groups, icons, and badges

🚀

Max Selection

Limit selections in multi-select mode

✅

Validation States

Built-in error, success, warning states

🎪

Portal Rendering

Solve z-index issues with portal mode

∞

Infinite Scroll

Load more options on scroll for pagination

Migrating from v2.x?

Update Dependencies

npm install svelte@^5 @sveltejs/vite-plugin-svelte@^5 vite@^6

Update Event Handlers

<!-- Before (v2.x) -->
<Select on:change={handleChange} />

<!-- After (v3.0.0) -->
<Select onChange={handleChange} />

ℹ️ Most features are backward compatible. See the full migration guide for details.

Ready to get started?

Join developers using Svelte Perfect Select in production

View Live Demos View on GitHub