Select

Select is a simple yet effective UI pattern for enabling users to make single-item selections from a list or set of options.

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' },
]Copy

+page.svelte

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

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

Sample

Props