« home

svelte-multiselect 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.

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

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

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[]>(
  `Python TypeScript C Haskell`.split(` `),

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