🔄

Bindings in Svelte

Two-way data binding mastery

✍️

Text Input Binding

Use bind:value for two-way data binding with inputs:

OUTPUT:

Hello world!

📝

Textarea & Markdown

Bind textarea values and render HTML with @html:

RENDERED MARKDOWN:

Here is italics and bold

  • And a list item

  • Another list item

🔢

Number & Range Inputs

Bind numeric values and sync multiple inputs to the same state:

SCOOPS

1

⚠️

Component Binding Example

Insecure Question Component

🍦

Complete Form Example

Combine radio buttons, checkboxes, and select inputs with validation:

Number of Scoops

Select Flavors

❌

You must select at least one flavor!

Alternative: Multi-Select

Your Order

1 scoop of nothing selected

💡

Binding Types

bind:value

Text inputs, numbers, textareas

bind:group

Radio buttons and checkboxes

bind:checked

Single checkbox state

Two-way sync

Automatic state synchronization