Form Handling in SvelteKit with Actions

What Are Form Actions?

SvelteKit form actions let you handle form submissions on the server with zero JavaScript required on the client — true progressive enhancement.

Basic Action

// +page.server.ts
import { fail } from '@sveltejs/kit';
import type { Actions } from './$types';

export const actions: Actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const name = data.get('name')?.toString();

    if (!name) {
      return fail(400, { error: 'Name is required' });
    }

    await saveToDatabase({ name });
    return { success: true };
  }
};

Using the Action in a Page

<!-- +page.svelte -->
<script lang="ts">
  import { enhance } from '$app/forms';
  let { form } = $props();
</script>

<form method="POST" use:enhance>
  <input name="name" />
  {#if form?.error}
    <p class="text-red-500">{form.error}</p>
  {/if}
  <button type="submit">Save</button>
</form>

Named Actions

Handle multiple actions on one page:

export const actions: Actions = {
  create: async ({ request }) => { /* ... */ },
  delete: async ({ request }) => { /* ... */ },
};

<form method="POST" action="?/create">...</form>
<form method="POST" action="?/delete">...</form>

Progressive Enhancement with use:enhance

The use:enhance directive intercepts form submissions and handles them via fetch, giving you SPA-like behaviour while keeping the form fully functional without JS:

<form
  method="POST"
  use:enhance={({ formElement, formData, action, cancel }) => {
    // Run before submission
    return async ({ result, update }) => {
      // Run after submission
      await update();
    };
  }}
>

Conclusion

SvelteKit form actions are one of the most elegant ways to handle forms in any framework. They work without JavaScript, enhance progressively, and keep your server logic cleanly separated from your UI.