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/[email protected]"
    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 |

li (select option)

select options must contain the class "select-option"

| Properties | Type | Description | | :-------- | :------- | :-------------------------------- | | data-value | string | Required. Value of the select option |

Support

For further support, feel free to email [email protected].

Issues

If you find any bugs, be my guest to create new issues ♥️♥️

Appendix

If you find this useful, please leave a star on my github repo, it would help me a lot ♥️♥️♥️