Working with Forms and Inputs

Forms are one of the most common parts of modern frontend applications. Login pages, search bars, checkout systems, dashboards, and settings panels all rely heavily on user input.

Svelte simplifies form handling through reactive variables and two-way binding.

Creating a Basic Input

Open App.svelte and add the following code:

<script>
  let username = "";
</script>

<input
  bind:value={username}
  placeholder="Enter your username"
/>

<h2>{username}</h2>

The bind:value directive keeps the input value synchronized with the username variable automatically.

As the user types, the displayed text updates instantly.

Working with Multiple Inputs

Forms usually contain multiple fields.

<script>
  let email = "";
  let password = "";
</script>

<input
  bind:value={email}
  placeholder="Email"
/>

<input
  type="password"
  bind:value={password}
  placeholder="Password"
/>

Each input stays connected to its own reactive variable.

Textareas and Select Menus

Svelte bindings also work with other form elements.

<script>
  let message = "";
  let role = "Developer";
</script>

<textarea bind:value={message}></textarea>

<select bind:value={role}>
  <option>Developer</option>
  <option>Designer</option>
</select>

The interface and data remain synchronized automatically.

Why Form Handling Matters

Frontend applications constantly collect user input:

• Authentication forms;
• Search systems;
• Checkout pages;
• Profile settings;
• Dashboard filters;
• Feedback forms.

Managing form data efficiently is one of the most important frontend development skills.