Forms

React controlled inputs require two things for every field: a value prop bound to state, and an onChange handler that calls a setter. For large forms this becomes repetitive, which is why react-hook-form exists.

Svelte’s bind:value replaces both in one directive. Write bind:value={name} and Svelte wires up the two-way binding automatically — reading the state on render and writing back on every input event. There is no onChange, no e.target.value, no setter.

For full-page form submission without JavaScript, SvelteKit form actions in +page.server.ts handle POST requests server-side — similar to Remix action functions — with progressive enhancement built in.

Controlled input vs bind:value

function ProfileForm() {
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');

  function handleSubmit(e) {
    e.preventDefault();
    console.log({ name, email });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="Name"
      />
      <input
        type="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
        placeholder="Email"
      />
      <button type="submit">Save</button>
    </form>
  );
}

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

  function handleSubmit(e) {
    e.preventDefault();
    console.log({ name, email });
  }
</script>

<form onsubmit={handleSubmit}>
  <input bind:value={name} placeholder="Name" />
  <input type="email" bind:value={email} placeholder="Email" />
  <button type="submit">Save</button>
</form>

bind:value works on input, textarea, and select. For checkboxes and radio buttons, use bind:checked. There is no onChange anywhere.

React form onSubmit vs Svelte onsubmit

function LoginForm() {
  const [password, setPassword] = React.useState('');
  const [remember, setRemember] = React.useState(false);

  return (
    <form onSubmit={e => {
      e.preventDefault();
      console.log({ password, remember });
    }}>
      <input
        type="password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <label>
        <input
          type="checkbox"
          checked={remember}
          onChange={e => setRemember(e.target.checked)}
        />
        Remember me
      </label>
      <button type="submit">Log in</button>
    </form>
  );
}

<script>
  let password = $state('');
  let remember = $state(false);
</script>

<form onsubmit={e => {
  e.preventDefault();
  console.log({ password, remember });
}}>
  <input type="password" bind:value={password} />
  <label>
    <input type="checkbox" bind:checked={remember} />
    Remember me
  </label>
  <button type="submit">Log in</button>
</form>

Try it: full form with bind:

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let name = $state('');
  let email = $state('');
  let role = $state('developer');
  let newsletter = $state(false);
  let submitted = $state(null);

  const roles = ['developer', 'designer', 'manager', 'other'];

  function handleSubmit(e) {
    e.preventDefault();
    submitted = { name, email, role, newsletter };
  }

  function reset() {
    name = '';
    email = '';
    role = 'developer';
    newsletter = false;
    submitted = null;
  }
</script>

{#if submitted}
  <div style="padding:1rem;border:2px solid #4ade80;border-radius:8px;background:#f0fdf4">
    <h3 style="margin-top:0;color:#166534">Submitted!</h3>
    <ul style="margin:0;padding-left:1.25rem">
      <li><strong>Name:</strong> {submitted.name}</li>
      <li><strong>Email:</strong> {submitted.email}</li>
      <li><strong>Role:</strong> {submitted.role}</li>
      <li><strong>Newsletter:</strong> {submitted.newsletter ? 'Yes' : 'No'}</li>
    </ul>
    <button onclick={reset} style="margin-top:0.75rem">Reset</button>
  </div>
{:else}
  <form onsubmit={handleSubmit} style="display:flex;flex-direction:column;gap:0.75rem;max-width:320px">
    <label>
      Name
      <input bind:value={name} placeholder="Ada Lovelace" required style="display:block;width:100%;margin-top:0.25rem" />
    </label>

    <label>
      Email
      <input type="email" bind:value={email} placeholder="ada@example.com" required style="display:block;width:100%;margin-top:0.25rem" />
    </label>

    <label>
      Role
      <select bind:value={role} style="display:block;width:100%;margin-top:0.25rem">
        {#each roles as r}
          <option value={r}>{r[0].toUpperCase() + r.slice(1)}</option>
        {/each}
      </select>
    </label>

    <label style="display:flex;align-items:center;gap:0.5rem">
      <input type="checkbox" bind:checked={newsletter} />
      Subscribe to newsletter
    </label>

    <button type="submit" disabled={!name || !email}>Submit</button>
  </form>
{/if}

🔀 Controlled inputs vs bind:value, and SvelteKit form actions

React controlled inputs need value={state} + onChange={e => setState(e.target.value)} on every field — two attributes per input.
Svelte bind:value={state} is one directive that does both. No onChange, no e.target.value.
For checkboxes in React: checked={bool} + onChange={e => set(e.target.checked)}. In Svelte: bind:checked={bool}.
For select in React: value={selected} + onChange. In Svelte: bind:value={selected} on the select element.
e.preventDefault() in Svelte 5 is called inside the onsubmit handler. The old on:submit|preventDefault modifier from Svelte 4 is removed.
SvelteKit form actions (export const actions in +page.server.ts) handle server-side POST. The form works without JavaScript. Use use:enhance from $app/forms to progressively enhance to client-side submission. This is analogous to Remix action functions.