Svelte MultiSelect

Page-Reload Persistent MultiSelect

language_store is a Svelte writable that’s bound to the browser’s sessionStorage. This example shows how MultiSelect retains its selected state on page reload.

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

<MultiSelect
  options={languages}
  placeholder="What languages do you know?"
  bind:selected={$language_store}
>
  <LanguageSlot let:option {option} let:idx {idx} slot="selected" />
</MultiSelect>

language_store uses custom initialization logic and a wrapper around set method to update sessionStorage on new values:

import { session_store } from 'svelte-zoo'
import { writable } from 'svelte/store'

export const language_store = session_store<string[]>(
  `language-store`,
  `Python TypeScript C Haskell`.split(` `),
)

export const demos = writable<string[]>([])