Svelte MultiSelect

Allow Custom User Input

allowUserOptions={true} means users can enter custom options by entering text and hitting enter.

Allow duplicates

<script>
  import MultiSelect from 'svelte-multiselect'
  import { foods } from '$site/options'
  import { Toggle } from 'svelte-zoo'

  let selected = '🍇 Grapes, 🍈 Melon, 🍉 Watermelon, 🍊 Tangerine'.split(', ')
  let duplicates = false
</script>

<MultiSelect
  options={foods}
  allowUserOptions={true}
  {duplicates}
  bind:selected
/>

<label for="duplicates">
  Allow duplicates
  <Toggle bind:checked={duplicates} id="duplicates" />
</label>

Append User Input

allowUserOptions="append" is similar to true but also adds user-entered custom options to the dropdown list. They’ll remain there for re-selection if users remove their custom options from selected items.

<script>
  import MultiSelect from 'svelte-multiselect'
  import { languages } from '$site/options'
  import { LanguageSlot } from '$site'

  let selected_append = ['Haskell', 'TypeScript']
</script>

<MultiSelect
  options={languages}
  allowUserOptions="append"
  bind:selected={selected_append}
  createOptionMsg="True polyglots can enter custom languages!"
  let:option
>
  <LanguageSlot {option} />
</MultiSelect>

Start empty

You can start with no options and let users populate MultiSelect from scratch. In this case, MultiSelect acts more like a tagging component.

<script>
  import MultiSelect from 'svelte-multiselect'

  let selected = []
</script>

{#if selected?.length > 0}
  <pre><code>selected = {JSON.stringify(selected)}</code></pre>
{/if}

<MultiSelect
  allowUserOptions="append"
  bind:selected
  noMatchingOptionsMsg=""
  createOptionMsg={null}
/>