selected = []

svelte<script lang="ts">
  import { MultiSelect } from 'svelte-widgets'
  import type { ObjectOption } from 'svelte-widgets'
  type FrontendLib = { label: string; lang: string; repo: string }

  const frontend_libs: FrontendLib[] = [
    [`Svelte`, `JavaScript`, `sveltejs/svelte`],
    [`React`, `JavaScript`, `facebook/react`],
    [`Vue`, `JavaScript`, `vuejs/vue`],
    [`Angular`, `JavaScript`, `angular/angular`],
    [`Polymer`, `JavaScript`, `polymer/polymer`],
    [`Ruby on Rails`, `Ruby`, `rails/rails`],
    [`ASP.net`, `C#`, `dotnet/aspnetcore`],
    [`Laravel`, `PHP`, `laravel/laravel`],
    [`Django`, `Python`, `django/django`],
    [`Express`, `JavaScript`, `expressjs/express`],
    [`Spring`, `Java`, `spring-projects/spring-framework`],
    [`jQuery`, `JavaScript`, `jquery/jquery`],
    [`Flask`, `Python`, `pallets/flask`],
    [`Flutter`, `Dart`, `flutter/flutter`],
    [`Bootstrap`, `JavaScript`, `twbs/bootstrap`],
    [`Sinatra`, `Ruby`, `sinatra/sinatra`],
    [`Solid`, `JavaScript`, `solidjs/solid`],
    [`Ember JS`, `JavaScript`, `emberjs/ember.js`],
    [`Backbone`, `JavaScript`, `jashkenas/backbone`],
    [`Preact`, `JavaScript`, `preactjs/preact`],
  ].map(([label, lang, github_slug]) => ({
    label,
    lang,
    repo: `https://github.com/${github_slug}`,
  }))

  let selected: ObjectOption[] = $state([])
</script>

selected = {selected.map((itm, idx) => `${idx + 1}. ${itm.label}`).join(`, `) || `[]`}

<MultiSelect
  options={frontend_libs}
  placeholder="Pick your favorite frontend libs"
  sort_selected
  bind:value={selected}
/>

svelte<script lang="ts">
  import { MultiSelect } from 'svelte-widgets'
  type FrontendLib = { label: string; lang: string; repo: string }

  const frontend_libs: FrontendLib[] = [
    [`Svelte`, `JavaScript`, `sveltejs/svelte`],
    [`React`, `JavaScript`, `facebook/react`],
    [`Vue`, `JavaScript`, `vuejs/vue`],
    [`Angular`, `JavaScript`, `angular/angular`],
    [`Polymer`, `JavaScript`, `polymer/polymer`],
    [`Ruby on Rails`, `Ruby`, `rails/rails`],
    [`ASP.net`, `C#`, `dotnet/aspnetcore`],
    [`Laravel`, `PHP`, `laravel/laravel`],
    [`Django`, `Python`, `django/django`],
    [`Express`, `JavaScript`, `expressjs/express`],
    [`Spring`, `Java`, `spring-projects/spring-framework`],
    [`jQuery`, `JavaScript`, `jquery/jquery`],
    [`Flask`, `Python`, `pallets/flask`],
    [`Flutter`, `Dart`, `flutter/flutter`],
    [`Bootstrap`, `JavaScript`, `twbs/bootstrap`],
    [`Sinatra`, `Ruby`, `sinatra/sinatra`],
    [`Solid`, `JavaScript`, `solidjs/solid`],
    [`Ember JS`, `JavaScript`, `emberjs/ember.js`],
    [`Backbone`, `JavaScript`, `jashkenas/backbone`],
    [`Preact`, `JavaScript`, `preactjs/preact`],
  ].map(([label, lang, github_slug]) => ({
    label,
    lang,
    repo: `https://github.com/${github_slug}`,
  }))

  const sort_selected = (op1: FrontendLib, op2: FrontendLib): number => {
    if (op1.lang !== op2.lang) return op1.lang.localeCompare(op2.lang)
    return String(op1.label).localeCompare(String(op2.label))
  }
</script>

<MultiSelect
  options={frontend_libs}
  placeholder="Pick your favorite frontend libs"
  {sort_selected}
/>

sort_selected: boolean | ((op1: Option, op2: Option) => number) = false