<script>
import Select from 'svelte-select@4.4.4';
const items = [
{value: 'chocolate', label: '🍫 Chocolate', group: 'Sweet'},
{value: 'pizza', label: '🍕 Pizza', group: 'Savory'},
{value: 'cake', label: '🎂 Cake', group: 'Sweet'},
{value: 'cookies', label: '🍪 Cookies', group: 'Savory'},
{value: 'ice-cream', label: '🍦 Ice Cream', group: 'Sweet'}
];
let favouriteFood = undefined;
function handleSelect(event) {
favouriteFood = event.detail;
}
function handleClear() {
favouriteFood = undefined;
}
</script>
<h1>Svelte Select Example</h1>
<form>
<label for="food">Favourite food:</label>
<Select id="food" {items} on:select={handleSelect} on:clear={handleClear}></Select>
</form>
{#if favouriteFood}
<p>Favourite food is: {favouriteFood.label}</p>
{/if}
<style>
form {
max-width: 400px;