MultiSelect

Multi-select is a user interface pattern that allows users to select multiple items from a list or grid simultaneously.

countries.ts

export let countries = [
	{ value: 'us', label: 'United States'},
	{ value: 'fr', label: 'France'},
	{ value: 'gb', label: 'United Kingdom' },
	{ value: 'de', label: 'Germany' },
	{ value: 'jp', label: 'Japan' },
	{ value: 'au', label: 'Australia' },
	{ value: 'cn', label: 'China' },
	{ value: 'in', label: 'India' },
	{ value: 'mx', label: 'Mexico' },
]

+page.svelte

<script lang="ts">import { countries } from "$lib/countries";
import { MultiSelect } from "@grampro/svelte-block";
let selected = void 0;
</script>

<div>
	<Select items={countries} bind:value={selected} />
</div>

Sample

Props