Demos

Installation

npm install svelte-select

Svelte 5

Upgrading Svelte Select

Rollup and low/no-build setups

Props

Named slots

<Select>  <divslot="prepend" />  <divslot="selection"let:selectionlet:index /><!-- index only available when multiple -->  <divslot="clear-icon" />    <divslot="multi-clear-icon" />    <divslot="loading-icon" />    <divslot="chevron-icon" />   <divslot="list-prepend" />    <divslot="list"let:filteredItems />    <divslot="list-append" />    <divslot="item"let:itemlet:index />    <divslot="input-hidden"let:value />  <divslot="required"let:value /><!-- Remember you can also use `svelte:fragment` to avoid a container DOM element. -->  <svelte:fragmentslot="empty" />  </Select>

Events

Items

<script>importSelectfrom'svelte-select';letsimple=['one','two','three'];letcollection=[{value:1,label:'one'},{value:2,label:'two'},{value:3,label:'three'},];</script><Selectitems={simple}/><Selectitems={collection}/>

<script>importSelectfrom'svelte-select';constitems=[{value:'chocolate',label:'Chocolate',group:'Sweet'},{value:'pizza',label:'Pizza',group:'Savory'},{value:'cake',label:'Cake',group:'Sweet',selectable:false},{value:'chips',label:'Chips',group:'Savory'},{value:'ice-cream',label:'Ice Cream',group:'Sweet'}];constgroupBy=(item)=>item.group;</script><Select{items}{groupBy}/>

<script>importSelectfrom'svelte-select';constitemId='id';constlabel='title';constitems=[{id:0,title:'Foo'},{id:1,title:'Bar'},];</script><Select{itemId}{label}{items}/>

Async Items

<script>importSelectfrom'svelte-select';import{someApiCall}from'./services';asyncfunctionexamplePromise(filterText){// Put your async code here...// For example call an API using filterText as your search params// When your API responds resolve your Promiseletres=awaitsomeApiCall(filterText);returnres;}</script><SelectloadOptions={examplePromise}/>

Advanced List Positioning / Floating

<script>importSelectfrom'svelte-select';letfloatingConfig={strategy:'fixed'}</script><Select{floatingConfig}/>

Exposed methods

exportletitemFilter=(label,filterText,option)=>label.toLowerCase().includes(filterText.toLowerCase());

exportletgroupBy=undefined;

exportletgroupFilter=groups=>groups;

exportletcreateGroupHeaderItem=groupValue=>{return{value:groupValue,label:groupValue};};

exportfunctionhandleClear(){value=undefined;listOpen=false;dispatch("clear",value);handleFocus();}

exportletloadOptions=undefined;// if used must return a Promise that updates 'items'/* Return an object with { cancelled: true } to keep the loading state as active. */

exportconstgetFilteredItems=()=>{returnfilteredItems;};

exportletdebounce=(fn,wait=1)=>{clearTimeout(timeout);timeout=setTimeout(fn,wait);};

// core replaceable methods...<Selectfilter={...}getItems={...}/>

A11y (Accessibility)

exportletariaValues=(values)=>{return`Option${values}, selected.`;}exportletariaListOpen=(label,count)=>{return`You are currently focused on option${label}. There are${count} results available.`;}exportletariaFocused=()=>{return`Select is focused, type to refine list, press down to open the menu.`;}

CSS custom properties (variables)

<script>importSelectfrom'svelte-select';</script><Select--border-radius= "10px"--placeholder-color="blue"/>

<script>importSelectfrom'svelte-select';constitems=['One','Two','Three'];</script><Select{items}inputStyles="box-sizing: border-box;"></Select>

🧪 Experimental: Replace styles (Tailwind, Bootstrap, Bulma etc)

License