https://svelte.dev/repl/hello-world?version=3.48.0
<script>
let name = "Your Name"
let a = 40
let checked = true
let picked = "Two"
let names = ["Ace", "Blaze", "Chris", "Dwong"]
let checkedNames = []
let selectedName = []
</script>
<h1> 1. Text </h1>
Text<br/>
<input type="text" bind:value={name}/><br/>
Textarea <br/><textarea bind:value={name}/>
<h1> 2. Number</h1>
<input type=number bind:value={a} min="10" max="120"/>
<input type=range bind:value={a} min="10" max="120"/>
<h1>3. Checkbox</h1>
<h4> 3-1. Single</h4>
<label>
<input type="checkbox" bind:checked={checked}/> {checked ? "Checked" : "Not checked" }
</label>
<h4> 3-2. Array </h4>
{#each names as name, index (index)}
<label><input type="checkbox" value={name} bind:group={checkedNames}/> {name} </label>
{/each}
<h5> Checked: {checkedNames} </h5>
<h1>4. Radio button</h1>
<input type="radio" value="One" bind:group={picked}/> 1
<input type="radio" value="Two" bind:group={picked}/> 2
<input type="radio" value="Three" bind:group={picked}/> 3
<input type="radio" value="Four" bind:group={picked}/> 4
<h5>{picked}</h5>
<h1> 5. Selectbox</h1>
Selected option : {checkedNames}<br/>
<select bind:value={checkedNames} multiple>
{#each names as name} <option value={name}> {name} </option> {/each}
</select>
<br/>
<select bind:value={selectedName}>
{#each names as name} <option value={name}> {name} </option> {/each}
</select>
Selected option : {selectedName}