input > radio, checkbox, textarea, select, mutiful

<script>
	// radio
	let picked = null;
	// checkbox
	let fillings = [];
	// textarea
	let value = 'Some Text';
	// select
	const list = [
		{id: 1, text: 'A'},
		{id: 2, text: 'B'},
		{id: 3, text: 'C'},
	];
	let selected;
	// multiful
	let multiful = [];
</script>

<div>
	<label><input type="radio" bind:group={picked} value="Plain"> Plain</label>
	<label><input type="radio" bind:group={picked} value="Whole wheat"> Whole wheat</label>
	<label><input type="radio" bind:group={picked} value="Spinach"> Spinach</label>
	<br>
	<span>선택: {picked}</span>
</div>
<div>
	<label><input type="checkbox" bind:group={fillings} value="Plain"> Plain</label>
	<label><input type="checkbox" bind:group={fillings} value="Whole wheat"> Whole wheat</label>
	<label><input type="checkbox" bind:group={fillings} value="Spinach"> Spinach</label>
	<br>
	<span>선택: {fillings}</span>
</div>
<div>
	<textarea bind:value="{value}"></textarea>	
</div>
<div>
	<select bind:value="{selected}">
			<option value=""></option>
		{#each list as item (item.id)}
			<option value="{item}">{item.text}</option>
		{/each}
	</select>
	<span>선택함: {selected ? selected.id : 'waiting...'}</span>
</div>

<div>
	<select multiple bind:value="{multiful}">
		{#each list as item (item.id)}
			<option value="{item}">{item.text}</option>
		{/each}
	</select>
	<span>선택함: {multiful ? multiful.map(x => x.id).join(',') : 'waiting...'}</span>
</div>