Input bindings (bind:value) in Svelte - Mini Project: Build & Apply

Input bindings (bind:value) in Svelte

📖 Scenario: You are building a simple web form where users can type their name and see it displayed live on the page.

🎯 Goal: Create a Svelte component that uses bind:value to connect an input field to a variable, so the typed name updates the displayed text immediately.

📋 What You'll Learn

Create a variable called name initialized to an empty string.

Add an <input> element with bind:value={name} to link the input to the variable.

Display the current value of name below the input field inside a <p> tag.

Use semantic HTML and ensure the input has an accessible label.

💡 Why This Matters

🌍 Real World

Input bindings let users type data and see instant updates on the page, useful for forms, search boxes, and interactive apps.

💼 Career

Understanding input bindings is essential for building responsive user interfaces in modern web development frameworks like Svelte.

1

Create the name variable

Create a variable called name and set it to an empty string '' inside the <script> tag.

Svelte

  // Create a variable called name and set it to an empty string
  // Your code here

Need a hint?

Use let name = ''; inside the <script> tag to create the variable.

2

Add an input with bind:value

Add an <input> element with bind:value={name} inside the component's HTML. Also add a <label> with for="nameInput" and text "Enter your name:". Give the input an id="nameInput".

Svelte

  let name = '';

Need a hint?

Use <input id="nameInput" bind:value={name} /> and a matching <label for="nameInput">.

3

Display the live value of name

Add a <p> tag below the input that shows the text "Your name is: " followed by the current value of the name variable using curly braces.

Svelte

  let name = '';


Enter your name:

Need a hint?

Use <p>Your name is: {name}</p> to show the live value.

4

Add accessibility and finalize

Ensure the input has the aria-label="Name input field" attribute for accessibility. Add a <main> tag wrapping all content for semantic structure.

Svelte

  let name = '';


 and add aria-label to input -->

Need a hint?

Wrap all content inside <main> and add aria-label="Name input field" to the input.