Bindings / Group inputs • Svelte Tutorial

Basic Svelte Bindings Group inputs

同じ値に関連している type="radio" input や type="checkbox" input が複数ある場合、value 属性とともに bind:group を使うことができます。同じグループの radio input は互いに排他的(exclusive)です。同じグループの checkbox input は選択した値の配列を構成します。

bind:group={scoops} を radio input に追加し…

App

<input
	type="radio"
	name="scoops"
	value={number}
	bind:group={scoops}
/>

…そして bind:group={flavours} を checkbox input に追加します:

App

<input
	type="checkbox"
	name="flavours"
	value={flavour}
	bind:group={flavours}
/>

Edit this page on GitHub

previous next

Select bindings Select multiple

<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}

/>

		{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}

/>

		{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}

show text show editor