Einführung in Bindings

Was macht bind:?

Ohne Binding schreibst du klassisch zwei Stellen — eine zum Lesen, eine zum Reagieren auf Änderungen:

<script>
    let name = $state('');
</script>

<input value={name} oninput={(e) => name = e.currentTarget.value} />

Mit bind:value reicht eine Direktive — Svelte macht beides automatisch:

<input bind:value={name} />

bind: ist syntaktischer Zucker für die Two-Way-Synchronisierung zwischen einer Variablen und einem DOM-Property.

Two-Way- vs. Read-only-Bindings

Nicht jedes Binding lässt sich von beiden Seiten beschreiben:

• Two-Way: bind:value, bind:checked, bind:files, bind:open, bind:currentTime — du kannst lesen und schreiben.
• Read-only: bind:clientWidth, bind:duration, bind:naturalWidth etc. — du kannst nur lesen. Diese Werte werden vom Browser bestimmt; ein Schreibversuch wird ignoriert.

Read-only-Bindings sind trotzdem reaktiv: Wenn der Browser den Wert ändert (z. B. weil sich die Fenstergröße ändert), wird die Variable im Script aktualisiert.

Übersicht aller Bindings

Form-Elemente

Media-Elemente (audio, video)

Für <video> zusätzlich:

Bilder

Block-Level (Größen)

Auf jedem HTML-Element verfügbar:

Diese werden intern von einem ResizeObserver versorgt — kein eigener Listener nötig.

Spezielle Elemente

Refs

Komponenten

Bindings sind reaktiv

Das Schöne: Sobald die gebundene Variable mit $state reaktiv ist, wirken Updates in beide Richtungen — und alle abgeleiteten Werte aktualisieren sich automatisch:

<script>
    let name = $state('');
    let charCount = $derived(name.length);
</script>

<input bind:value={name} />
<p>{charCount} Zeichen</p>

Bei jeder Eingabe aktualisiert sich name (Browser -> Variable), und charCount (Variable -> UI) berechnet sich neu.

Wann bind:, wann manuell?

Sobald Logik beim Update gefragt ist, liefert ein expliziter Event-Handler mehr Kontrolle. Für reine Form-Felder ohne Logik ist bind: aber unschlagbar kompakt.

Bindings und Reaktivität — wichtiges Detail

Damit bind: funktioniert, muss die Ziel-Variable reaktiv sein. Ein nacktes let reicht in Svelte 5 nicht:

<script>
    let value = ''; // kein $state
</script>

<input bind:value /> <!-- Funktioniert nur eingeschränkt -->

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

<input bind:value />

Im Legacy-Modus (Svelte 4) waren let-Variablen automatisch reaktiv — in Svelte 5 mit Runes ist $state Pflicht.

Beispiel: Live-Vorschau eines Eingabefelds

<script>
    let title = $state('Mein Beitrag');
    let body = $state('');
</script>

<form>
    <label>
        Titel
        <input bind:value={title} />
    </label>
    <label>
        Inhalt
        <textarea bind:value={body} rows="4"></textarea>
    </label>
</form>

<article>
    <h1>{title || '(ohne Titel)'}</h1>
    <p>{body || '(noch leer)'}</p>
</article>

Eingabe links, Vorschau rechts — kein einziger Event-Handler, nichts zum Vergessen.

Häufige Stolperfallen

Bind ohne reaktive Variable. bind:value={value} mit nicht-$state-Variable führt zu seltsamem Verhalten oder Compiler-Warnung.

Bind auf abgeleiteten Wert. bind:value={fullName} mit fullName als $derived geht nicht — abgeleitete Werte sind nicht beschreibbar.

Konflikt zwischen bind:value und value=.... Beides gleichzeitig zu setzen führt zu undefiniertem Verhalten. Entweder bind: oder manuelle Steuerung — nicht beides.

Numerische Inputs liefern Strings. <input type="number"> gibt mit bind:value automatisch eine Zahl zurück — keine Konvertierung nötig. Bei type="text" mit numerischer Eingabe ist es weiterhin ein String.

Bind auf Komponenten-Property ohne $bindable. Compiler-Fehler. Die Prop muss in der Kind-Komponente explizit als bindbar markiert sein — siehe $bindable.

Weiterführende Ressourcen

Externe Quellen

• bind: – svelte.dev

Verwandte Artikel

• Form-Bindings
• Media-Bindings
• Element- und Block-Bindings
• Component-Bindings
• $bindable