Skip to main content
Basic Svelte Bindings Select multiple

A <select> element can have a multiple attribute, in which case it will populate an array rather than selecting a single value.

Replace the checkboxes with a <select multiple>:

App
<h2>Flavours</h2>

<select multiple bind:value={flavours}>
	{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}
		<option>{flavour}</option>
	{/each}
</select>

Note that we’re able to omit the value attribute on the <option>, since the value is identical to the element’s contents.

Press and hold the control key (or the command key on MacOS) to select multiple options.

Edit this page on GitHub

previous next
Group inputs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script>
	let scoops = $state(1);
	let flavours = $state([]);
 
	const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
</script>
 
<h2>Size</h2>
 
{#each [1, 2, 3] as number}
	<label>
		<input
			type="radio"
			name="scoops"
			value={number}
			bind:group={scoops}
		/>
 
		{number} {number === 1 ? 'scoop' : 'scoops'}
	</label>
{/each}
 
<h2>Flavours</h2>
 
{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}
	<label>
		<input
			type="checkbox"
			name="flavours"
			value={flavour}
			bind:group={flavours}
		/>
 
		{flavour}
	</label>
{/each}
 
{#if flavours.length === 0}
	<p>Please select at least one flavour</p>
{:else if flavours.length > scoops}
	<p>Can't order more flavours than scoops!</p>
{:else}
	<p>
		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
		of {formatter.format(flavours)}
	</p>
{/if}