How do you handle forms in SvelteKit with use:enhance?
Answer
use:enhance is a SvelteKit action that progressively enhances HTML form submissions with client-side JavaScript. Without it, form submissions cause a full page reload (pure HTML behavior). With it, submissions are intercepted, sent via fetch, and the page is updated in place. Basic usage: import { enhance } from '$app/forms'; <form method="POST" use:enhance>. This handles the default action, updates the form store with action return values, and re-runs load functions on success. Custom callback: use:enhance={({ formData, cancel }) => { loading = true; return async ({ result, update }) => { loading = false; await update(); } }}. The outer function runs before submission (can cancel()); the returned function runs after the response. This pattern maintains the progressive enhancement principle — forms work without JavaScript (server handles submission) and are enhanced when JavaScript is available.
Previous
What is Svelte 5 and what are runes?
Next
What are Svelte custom stores and the store contract?