svelte<script lang="ts">
  import MultiSelect from '$lib'
  import { foods } from '$site/options'

  // golden-angle hue rotation gives distinct colors that stay identical
  // between prerender and hydration (Math.random() would not)
  let options = $derived(
    foods.map((label, idx) => ({
      label,
      style: `background-color: hsla(${(idx * 137.5) % 360}, 70%, 50%, 0.3)`,
    })),
  )
</script>

<MultiSelect
  {options}
  placeholder="Pick your favorite foods"
  removeAllTitle="Remove all foods"
  closeDropdownOnSelect
  style="width: 500px"
  invalid
/>

svelte<script lang="ts">
  import MultiSelect from '$lib'

  const options = [`Svelte`, `Solid`, `React`]
</script>

<MultiSelect
  {options}
  closeDropdownOnSelect="retain-focus"
  placeholder="Pick a framework"
/>