bind: directive memberikan two-way binding di Svelte.

bind:value

<script>
  let nama = ""
</script>

<input bind:value={nama} />
<p>Halo, {nama}!</p>

Binding Lainnya

<script>
  let checked = false
  let selected = ""
  let teks = ""
</script>

<input type="checkbox" bind:checked />
<textarea bind:value={teks} />

<select bind:value={selected}>
  <option value="a">Opsi A</option>
  <option value="b">Opsi B</option>
</select>

Group Binding

<script>
  let hobi = []
</script>

<label>
  <input type="checkbox" bind:group={hobi} value="coding" /> Coding
</label>
<label>
  <input type="checkbox" bind:group={hobi} value="gaming" /> Gaming
</label>

bind:this (DOM Reference)

Kalau kamu butuh akses langsung ke elemen DOM (mis. untuk memanggil .focus() atau mengukur ukuran), pakai bind:this:

<script>
  let inputEl;
  function fokus() { inputEl.focus(); }
</script>

<input bind:this={inputEl} />
<button on:click={fokus}>Fokus input</button>

Setelah komponen mount, inputEl akan berisi referensi ke elemen <input> yang sebenarnya. Sebelum mount, nilainya undefined — jadi akses pakai bind:this biasanya di dalam onMount atau event handler.