データは通常、親から子へと流れますが、`bind:` ディレクティブを使用すると、データを子から親へ流すことができます。

一般的な構文は `bind:property={expression}` であり、`expression` は [_lvalue_](https://press.rebus.community/programmingfundamentals/chapter/lvalue-and-rvalue/) (つまり、変数やオブジェクトのプロパティ) です。式がプロパティと同じ名前の識別子である場合、式を省略することができます — 言い換えると、以下は等価です:

<!-- prettier-ignore -->
```svelte
<input bind:value={value} />
<input bind:value />
```


Svelte は、バインドされた値を更新するイベントリスナーを作成します。要素が既に同じイベントのリスナーを持っている場合、そのリスナーはバインドされた値が更新される前に実行されます。

ほとんどのバインディングは _双方向_ であり、値の変更が要素に影響し、その逆も同様です。一部のバインディングは _読み取り専用_ であり、値を変更しても要素に影響を与えません。

## Function bindings

`bind:property={get, set}` を使用して、`get` と `set` を関数として指定し、バリデーションや変換を行うことができます:

```svelte
<input bind:value={
	() => value,
	(v) => value = v.toLowerCase()}
/>
```

[dimension bindings](#Dimensions) のような読み取り専用バインディングの場合、`get` の値は `null` にする必要があります:

```svelte
<div
	bind:clientWidth={null, redraw}
	bind:clientHeight={null, redraw}
>...</div>
```

> [!NOTE]
> Function bindings は Svelte 5.9.0 以降で使用可能です。

## `<input bind:value>`

`<input>` 要素に対する `bind:value` ディレクティブは、input の `value` プロパティをバインドします:

<!-- prettier-ignore -->
```svelte
<script>
	let message = $state('hello');
</script>

<input bind:value={message} />
<p>{message}</p>
```

数値を扱う input (`type="number"` または `type="range"`) の場合、値は数値に変換されます ([デモ](/playground/untitled#H4sIAAAAAAAAE6WPwYoCMQxAfyWEPeyiOOqx2w74Hds9pBql0IllmhGXYf5dKqwiyILsLXnwwsuI-5i4oPkaUX8yo7kCnKNQV7dNzoty4qSVBSr8jG-Poixa0KAt2z5mbb14TaxA4OCtKCm_rz4-f2m403WltrlrYhMFTtcLNkoeFGqZ8yhDF7j3CCHKzpwoDexGmqCL4jwuPUJHZ-dxVcfmyYGe5MAv-La5pbxYFf5Z9Zf_UJXb-sEMquFgJJhBmGyTW5yj8lnRaD_w9D1dAKSSj7zqAQAA)):

```svelte
<script>
	let a = $state(1);
	let b = $state(2);
</script>

<label>
	<input type="number" bind:value={a} min="0" max="10" />
	<input type="range" bind:value={a} min="0" max="10" />
</label>

<label>
	<input type="number" bind:value={b} min="0" max="10" />
	<input type="range" bind:value={b} min="0" max="10" />
</label>

<p>{a} + {b} = {a + b}</p>
```

入力が空または無効 (`type="number"` の場合) の場合、値は `undefined` になります。

バージョン 5.6.0 以降、`<input>` に `defaultValue` が設定されていてフォームの一部である場合、フォームがリセットされると空文字列ではなくその値に戻ります。初回のレンダリングでは、バインディングの値が `null` または `undefined` でない限り優先されることに注意してください。

```svelte
<script>
	let value = $state('');
</script>

<form>
	<input bind:value defaultValue="not the empty string">
	<input type="reset" value="Reset">
</form>
```

> [!NOTE]
> リセットボタンは慎重に使用し、ユーザーがフォームを送信しようとしているときに誤ってクリックしないようにしてください。

## `<input bind:checked>`

checkbox および radio の input には、`bind:checked` を使用してバインドできます:

```svelte
<label>
	<input type="checkbox" bind:checked={accepted} />
	Accept terms and conditions
</label>
```

バージョン 5.6.0 以降、`<input>` に `defaultChecked` 属性が設定されておりフォームの一部である場合、フォームがリセットされると `false` ではなくその値に戻ります。初回のレンダリングでは、バインディングの値が `null` または `undefined` でない限り優先されます。

```svelte
<script>
	let checked = $state(true);
</script>

<form>
	<input type="checkbox" bind:checked defaultChecked={true}>
	<input type="reset" value="Reset">
</form>
```

## `<input bind:indeterminate>`

チェックボックスは、それがチェックされているかされていないかに関係なく、[indeterminate](https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement/indeterminate) 状態にすることができます:

```svelte
<script>
	let checked = $state(false);
	let indeterminate = $state(true);
</script>

<form>
	<input type="checkbox" bind:checked bind:indeterminate>

	{#if indeterminate}
		waiting...
	{:else if checked}
		checked
	{:else}
		unchecked
	{/if}
</form>
```

## `<input bind:group>`

相互に動作する input は、`bind:group` を使用できます。 ([demo](/playground/untitled#H4sIAAAAAAAAE62T32_TMBDH_5XDQkpbrct7SCMGEvCEECDxsO7BSW6L2c227EvbKOv_jp0f6jYhQKJv5_P3PvdL1wstH1Bk4hMSGdgbRzUssFaM9VJciFtF6EV23QvubNRFR_BPUVfWXvodEkdfKT3-zl8Zzag5YETuK6csF1u9ZUIGNo4VkYQNvPYsGRfJF5JKJ8s3QRJE6WoFb2Nq6K-ck13u2Sl9Vxxhlc6QUBIFnz9Brm9ifJ6esun81XoNd860FmtwslYGlLYte5AO4aHlVhJ1gIeKWq92COt1iMtJlkhFPkgh1rHZiiF6K6BUus4G5KafGznCTlIbVUMfQZUWMJh5OrL-C_qjMYSwb1DyiH7iOEuCb1ZpWTUjfHqcwC_GWDVY3ZfmME_SGttSmD9IHaYatvWHIc6xLyqad3mq6KuqcCwnWn9p8p-p71BqP2IH81zc9w2in-od7XORP7ayCpd5YCeXI_-p59mObPF9WmwGpx3nqS2Gzw8TO3zOaS5_GqUXyQUkS3h8hOSz0ZhMESHGc0c4Hm3MAn00t1wrb0l2GZRkqvt4sXwczm6Qh8vnUJzI2LV4vAkvqWgfehTZrSSPx19WiVfFfAQAAA==)):

```svelte
<!--- file: BurritoChooser.svelte --->
<script>
	let tortilla = $state('Plain');

	/** @type {string[]} */
	let fillings = $state([]);
</script>

<!-- grouped radio inputs are mutually exclusive -->
<label><input type="radio" bind:group={tortilla} value="Plain" /> Plain</label>
<label><input type="radio" bind:group={tortilla} value="Whole wheat" /> Whole wheat</label>
<label><input type="radio" bind:group={tortilla} value="Spinach" /> Spinach</label>

<!-- grouped checkbox inputs populate an array -->
<label><input type="checkbox" bind:group={fillings} value="Rice" /> Rice</label>
<label><input type="checkbox" bind:group={fillings} value="Beans" /> Beans</label>
<label><input type="checkbox" bind:group={fillings} value="Cheese" /> Cheese</label>
<label><input type="checkbox" bind:group={fillings} value="Guac (extra)" /> Guac (extra)</label>
```

> [!NOTE] `bind:group` は、input が同じ Svelte コンポーネント内にある場合にのみ機能します。

## `<input bind:files>`

`type="file"` を持つ `<input>` 要素では、`bind:files` を使用して [選択されたファイルの `FileList`](https://developer.mozilla.org/ja/docs/Web/API/FileList) を取得できます。プログラムでファイルを更新する場合、常に `FileList` オブジェクトを使用する必要があります。現在、`FileList` オブジェクトは直接作成できないため、新しい [`DataTransfer`](https://developer.mozilla.org/ja/docs/Web/API/DataTransfer) オブジェクトを作成し、そこから `files` を取得する必要があります。

```svelte
<script>
	let files = $state();

	function clear() {
		files = new DataTransfer().files; // null or undefined does not work
	}
</script>

<label for="avatar">Upload a picture:</label>
<input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
<button onclick={clear}>clear</button>
```

`FileList` オブジェクトも変更できないため、例えばリストから単一のファイルを削除したい場合は、新しい `DataTransfer` オブジェクトを作成し、保持したいファイルを追加する必要があります。

> [!NOTE] `DataTransfer` はサーバーサイドの JS ランタイムでは利用できない場合があります。`files` にバインドされた state を未初期化のままにしておくことで、コンポーネントがサーバーサイドレンダリングされる際の潜在的なエラーを防ぐことができます。

## `<select bind:value>`

`<select>` の値のバインディングは、選択された `<option>` の `value` プロパティに対応しており、これは通常の DOM での場合と異なり、文字列だけでなく任意の値を使用できます。

```svelte
<select bind:value={selected}>
	<option value={a}>a</option>
	<option value={b}>b</option>
	<option value={c}>c</option>
</select>
```

`<select multiple>` 要素は、チェックボックスグループと同様に動作します。バインドされた変数は、選択された各 `<option>` の `value` プロパティに対応するエントリを持つ配列です。

```svelte
<select multiple bind:value={fillings}>
	<option value="Rice">Rice</option>
	<option value="Beans">Beans</option>
	<option value="Cheese">Cheese</option>
	<option value="Guac (extra)">Guac (extra)</option>
</select>
```

`<option>` の値がそのテキストコンテンツと一致する場合、その属性は省略できます。

```svelte
<select multiple bind:value={fillings}>
	<option>Rice</option>
	<option>Beans</option>
	<option>Cheese</option>
	<option>Guac (extra)</option>
</select>
```

`<select>` にデフォルト値を設定するには、初期選択すべき `<option>` (または `<select multiple>` の場合は複数の `<option>`) に `selected` 属性を追加します。`<select>` がフォームの一部である場合、フォームがリセットされるとその選択に戻ります。初回レンダリング時には、バインディングの値が `undefined` でない限り優先されます。

```svelte
<select bind:value={selected}>
	<option value={a}>a</option>
	<option value={b} selected>b</option>
	<option value={c}>c</option>
</select>
```

## `<audio>`

`<audio>` 要素には、以下の5つの双方向バインディングがあります:

- [`currentTime`](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/currentTime)
- [`playbackRate`](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/playbackRate)
- [`paused`](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/paused)
- [`volume`](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/volume)
- [`muted`](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/muted)

...および以下の6つの読み取り専用バインディングがあります:

- [`duration`](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/duration)
- [`buffered`](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/buffered)
- [`seekable`](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/seekable)
- [`seeking`](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/seeking_event)
- [`ended`](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/ended)
- [`readyState`](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/readyState)
- [`played`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/played)

```svelte
<audio src={clip} bind:duration bind:currentTime bind:paused></audio>
```

## `<video>`

`<video>` 要素には、[`<audio>`](#audio) 要素と同じバインディングがすべて含まれ、さらに読み取り専用の [`videoWidth`](https://developer.mozilla.org/ja/docs/Web/API/HTMLVideoElement/videoWidth) および [`videoHeight`](https://developer.mozilla.org/ja/docs/Web/API/HTMLVideoElement/videoHeight) バインディングがあります。

## `<img>`

`<img>` 要素には、以下の2つの読み取り専用バインディングがあります:

- [`naturalWidth`](https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/naturalWidth)
- [`naturalHeight`](https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/naturalHeight)

## `<details bind:open>`

`<details>` 要素は、`open` プロパティへのバインディングをサポートします。

```svelte
<details bind:open={isOpen}>
	<summary>How do you comfort a JavaScript bug?</summary>
	<p>You console it.</p>
</details>
```

## `window` and `document`

To bind to properties of `window` and `document`, see [`<svelte:window>`](svelte-window) and [`<svelte:document>`](svelte-document).

## Contenteditable bindings

`contenteditable` 属性を持つ要素は、以下のバインディングをサポートします:

- [`innerHTML`](https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML)
- [`innerText`](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/innerText)
- [`textContent`](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent)

> [!NOTE] [`innerText` と `textContent` には微妙な違いがあります](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent#innertext_との違い)。

<!-- for some reason puts the comment and html on same line -->
<!-- prettier-ignore -->
```svelte
<div contenteditable="true" bind:innerHTML={html}></div>
```

## Dimensions

すべての visible な要素には、以下の読み取り専用バインディングがあり、これらは `ResizeObserver` を使用して測定されます:

- [`clientWidth`](https://developer.mozilla.org/ja/docs/Web/API/Element/clientWidth)
- [`clientHeight`](https://developer.mozilla.org/ja/docs/Web/API/Element/clientHeight)
- [`offsetWidth`](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth)
- [`offsetHeight`](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetHeight)
- [`contentRect`](https://developer.mozilla.org/ja/docs/Web/API/ResizeObserverEntry/contentRect)
- [`contentBoxSize`](https://developer.mozilla.org/ja/docs/Web/API/ResizeObserverEntry/contentBoxSize)
- [`borderBoxSize`](https://developer.mozilla.org/ja/docs/Web/API/ResizeObserverEntry/borderBoxSize)
- [`devicePixelContentBoxSize`](https://developer.mozilla.org/ja/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize)

```svelte
<div bind:offsetWidth={width} bind:offsetHeight={height}>
	<Chart {width} {height} />
</div>
```

> [!NOTE] `display: inline` 要素には width や height がありません (`<img>` や `<canvas>` のような「固有の」 dimension を持つ要素を除く)。そのため、`ResizeObserver` で観測することはできません。これらの要素の `display` スタイルを `inline-block` などに変更する必要があります。CSS transformation は `ResizeObserver` コールバックをトリガーしないことにご注意ください。

## bind:this

```svelte
<!--- copy: false --->
bind:this={dom_node}
```

DOM ノードへの参照を取得するには、`bind:this` を使用します。この値はコンポーネントがマウントされるまで `undefined` のままです — 言い換えると、初期化時ではなく、effect やイベントハンドラー内で読み取る必要があります:

```svelte
<script>
	/** @type {HTMLCanvasElement} */
	let canvas;

	$effect(() => {
		const ctx = canvas.getContext('2d');
		drawStuff(ctx);
	});
</script>

<canvas bind:this={canvas}></canvas>
```

コンポーネントも `bind:this` をサポートしており、プログラムでコンポーネントインスタンスを操作できます。

```svelte
<!--- file: App.svelte --->
<ShoppingCart bind:this={cart} />

<button onclick={() => cart.empty()}> Empty shopping cart </button>
```

```svelte
<!--- file: ShoppingCart.svelte --->
<script>
	// All instance exports are available on the instance object
	export function empty() {
		// ...
	}
</script>
```

## bind:_property_ for components

```svelte
bind:property={variable}
```

要素と同じ構文を使用して、コンポーネントの props にバインドできます。

```svelte
<Keypad bind:value={pin} />
```

Svelte の props はバインディングなしでもリアクティブですが、そのリアクティビティはデフォルトでコンポーネント内にのみ流れます。`bind:property` を使用すると、コンポーネント内から props の変更をコンポーネント外に流すことができます。

props がバインド可能なものとしてマークするには、[`$bindable`]($bindable) rune を使用します:

```svelte
<script>
	let { readonlyProperty, bindableProperty = $bindable() } = $props();
</script>
```

props をバインド可能として宣言することは、それが `bind:` を使用できることを意味しますが、`bind:` を使用しなければならないことを意味するわけではありません。

bindable な props にはフォールバック値を設定できます:

```svelte
<script>
	let { bindableProperty = $bindable('fallback value') } = $props();
</script>
```

このフォールバック値は、props がバインドされていない場合にのみ適用されます。props がバインドされていてフォールバック値が存在する場合、親コンポーネントは `undefined` 以外の値を提供する必要があります。そうでない場合、ランタイムエラーが発生します。これにより、どの値が適用されるかが不明確な状況になるのを防ぎます。