@canadies/searchselectsvelte NPM

Search Select Svelte (SSS)

A light weight, easy to use select Svelte component with lots of handy integrated features

Authors

@Daniel Ho

Demo

A demo app of this component can be seen here.

Features

Allows more than just text to be displayed in select (eg: emoji, icon, etc).
Allows searching for the corresponding value.
Customable UI (using global classes, lib, etc).

Installation

Install SearchSelectSvelte with npm

npm i @canadies/searchselectsvelte

Usage/Examples

<script>
	import {SearchSelectSvelte} from "@canadies/searchselectsvelte@1.0.6"
    let list = ["a", "b", "c", "d"]
    let selectedValue
</script>

<svelte:head>
	<script src="https://cdn.tailwindcss.com"></script>
</svelte:head>

<div class=" max-w-md mx-auto flex flex-wrap gap-10">
    <h1 class="font-bold text-3xl w-full">Search Select Svelte Demo</h1>
    <SearchSelectSvelte bind:selected={selectedValue}>
        {#each list as item}
            <li class="select-option" data-value={item}>{item}</li>
        {/each}
    </SearchSelectSvelte>
    
    <h3 class="text-xl w-full">Selected value: {selectedValue}</h3>
</div>

Properties

ul (dropdown board)

Properties	Type	Description
`selected`	`string`	Required. Used to bind the selected value
`inputPlaceholder`	`string`	Optional. Placeholder of the select (default: 'Search here')
`dropdownCssClass`	`string`	Optional. Style the select dropdown using css class (global css, tailwind, etc) as you wish
`dropdownStyle`	`string`	Optional. Style the select dropdown using css style as you wish