Multi-Select

A multi-select input that emulates the Shadcn Select component as closely as possible.

<script lang="ts">
  import { MultiSelect } from "$lib/components/components/multi-select";
 
  const frameworks = [
    { value: "next.js", label: "Next.js" },
    { value: "sveltekit", label: "SvelteKit" },
    { value: "nuxt.js", label: "Nuxt.js" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" },
    { value: "vue", label: "Vue.js" },
    { value: "react", label: "React" }
  ];
 
  let value = $state<string[]>([]);
</script>
 
<MultiSelect
  bind:value
  items={frameworks}
  placeholder="Select frameworks..."
  class="w-[400px]"
/>

Installation

pnpm dlx shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/multi-select.json

npx shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/multi-select.json

bun x shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/multi-select.json

yarn shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/multi-select.json

Usage

<script lang="ts">
	import { MultiSelect } from '$lib/components/multi-select';
 
	const frameworks = [
		{ value: 'next.js', label: 'Next.js' },
		{ value: 'sveltekit', label: 'SvelteKit' },
		{ value: 'nuxt.js', label: 'Nuxt.js' },
		{ value: 'remix', label: 'Remix' },
		{ value: 'astro', label: 'Astro' },
		{ value: 'vue', label: 'Vue.js' },
		{ value: 'react', label: 'React' }
	];
 
	let value = $state<string[]>([]);
</script>
 
<MultiSelect
	bind:value
	items={frameworks}
	placeholder="Select frameworks..."
	placeholderSearch="Search frameworks..."
	emptySearchMessage="No frameworks found"
	overflowBehavior="wrap-when-open"
	disableSearch
	class="w-[400px]"
/>

Examples

Customize Badges

<script lang="ts">
  import { MultiSelect } from "$lib/components/components/multi-select";
 
  const fruits = [
    { value: "apple", label: "Apple", badgeLabel: "🍎" },
    { value: "banana", label: "Banana", badgeLabel: "🍌" },
    { value: "cherry", label: "Cherry", badgeLabel: "🍒" },
    { value: "grapes", label: "Grapes", badgeLabel: "🍇" },
    { value: "kiwi", label: "Kiwi", badgeLabel: "🥝" },
    { value: "orange", label: "Orange", badgeLabel: "🍊" }
  ];
 
  let value = $state<string[]>([]);
</script>
 
<MultiSelect
  bind:value
  items={fruits}
  placeholder="Select fruits..."
  class="w-[400px]"
/>

Overflow Behavior

<script lang="ts">
  import { Label } from "$lib/components/ui/label";
  import { MultiSelect } from "$lib/components/components/multi-select";
  import * as Select from "$lib/components/ui/select";
 
  const frameworks = [
    { value: "next.js", label: "Next.js" },
    { value: "sveltekit", label: "SvelteKit" },
    { value: "nuxt.js", label: "Nuxt.js" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" },
    { value: "vue", label: "Vue.js" },
    { value: "react", label: "React" }
  ];
 
  const overflowBehavior = ["wrap-when-open", "wrap", "cutoff"] as const;
  type OverflowBehavior = (typeof overflowBehavior)[number];
 
  let value = $state<string[]>([]);
  let selectValue = $state<OverflowBehavior>("wrap-when-open");
</script>
 
<div class="flex w-[400px] flex-col gap-8">
  <div class="flex flex-col gap-2">
    <Label>Overflow Behavior</Label>
    <Select.Root type="single" bind:value={selectValue}>
      <Select.Trigger class="w-[180px]">
        {selectValue}
      </Select.Trigger>
      <Select.Content>
        {#each overflowBehavior as item}
          <Select.Item value={item}>{item}</Select.Item>
        {/each}
      </Select.Content>
    </Select.Root>
  </div>
 
  <div class="flex flex-col gap-2">
    <Label>Frameworks</Label>
    <MultiSelect
      bind:value
      items={frameworks}
      overflowBehavior={selectValue}
      placeholder="Select frameworks..."
      class="w-[400px]"
    />
  </div>
</div>

Search Configuration

<script lang="ts">
  import { Label } from "$lib/components/ui/label";
  import { MultiSelect } from "$lib/components/components/multi-select";
 
  const frameworks = [
    { value: "next.js", label: "Next.js" },
    { value: "sveltekit", label: "SvelteKit" },
    { value: "nuxt.js", label: "Nuxt.js" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" },
    { value: "vue", label: "Vue.js" },
    { value: "react", label: "React" }
  ];
</script>
 
<div class="flex w-[400px] flex-col gap-8">
  <div class="flex flex-col gap-2">
    <Label>Disabled Search</Label>
    <MultiSelect items={frameworks} disableSearch class="w-[400px]" />
  </div>
 
  <div class="flex flex-col gap-2">
    <Label>Customized Search</Label>
    <MultiSelect
      items={frameworks}
      placeholderSearch="Search frameworks..."
      emptySearchMessage="No frameworks found"
      class="w-[400px]"
    />
  </div>
</div>

Form

<script lang="ts" module>
  import { z } from "zod/v4";
 
  const formSchema = z.object({
    favoriteFrameworks: z.array(z.string()).min(1, "Required")
  });
</script>
 
<script lang="ts">
  import { defaults, superForm } from "sveltekit-superforms";
  import { zod4 } from "sveltekit-superforms/adapters";
  import * as Form from "$lib/components/ui/form/index.js";
  import { toast } from "svelte-sonner";
  import { MultiSelect } from "$lib/components/components/multi-select";
 
  const form = superForm(defaults(zod4(formSchema)), {
    validators: zod4(formSchema),
    SPA: true,
    resetForm: false,
    onUpdate: ({ form: f }) => {
      if (f.valid) {
        toast.success(`You submitted ${JSON.stringify(f.data, null, 2)}`);
      } else {
        toast.error("Please fix the errors in the form.");
      }
    }
  });
 
  const { form: formData, enhance } = form;
 
  const frameworks = [
    { value: "next.js", label: "Next.js" },
    { value: "sveltekit", label: "SvelteKit" },
    { value: "nuxt.js", label: "Nuxt.js" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" },
    { value: "vue", label: "Vue.js" },
    { value: "react", label: "React" }
  ];
</script>
 
<form method="POST" class="w-2/3 space-y-6" use:enhance>
  <Form.Field {form} name="favoriteFrameworks">
    <Form.Control>
      {#snippet children({ props })}
        <Form.Label>Favorite Frameworks</Form.Label>
        <MultiSelect
          {...props}
          bind:value={$formData.favoriteFrameworks}
          items={frameworks}
          placeholder="Select frameworks..."
          class="w-[400px]"
        />
      {/snippet}
    </Form.Control>
    <Form.FieldErrors />
  </Form.Field>
  <Form.Button>Submit</Form.Button>
</form>

Loading Swap Number Input