Forms / Customizing use:enhance • Svelte Tutorial

SvelteKit基础 Forms Customizing use:enhance

With use:enhance, we can go further than just emulating the browser’s native behaviour. By providing a callback, we can add things like pending states and optimistic UI. Let’s simulate a slow network by adding an artificial delay to our two actions:

src/routes/+page.server

export const actions = {
	create: async ({ cookies, request }) => {
		await new Promise((fulfil) => setTimeout(fulfil, 1000));
		...
	},

	delete: async ({ cookies, request }) => {
		await new Promise((fulfil) => setTimeout(fulfil, 1000));
		...
	}
};

When we create or delete items, it now takes a full second before the UI updates, leaving the user wondering if they messed up somehow. To solve that, add some local state...

src/routes/+page

<script>
	import { fly, slide } from 'svelte/transition';
	import { enhance } from '$app/forms';

	let { data, form } = $props();

	let creating = $state(false);
	let deleting = $state([]);
</script>

<script lang="ts">
	import { fly, slide } from 'svelte/transition';
	import { enhance } from '$app/forms';

	let { data, form } = $props();

	let creating = $state(false);
	let deleting = $state([]);
</script>

...and toggle creating inside the first use:enhance:

src/routes/+page

<form
	method="POST"
	action="?/create"
	use:enhance={() => {
		creating = true;

		return async ({ update }) => {
			await update();
			creating = false;
		};
	}}
>
	<label>
		add a todo:
		<input
			disabled={creating}
			name="description"
			value={form?.description ?? ''}
			autocomplete="off"
			required
		/>
	</label>
</form>

We can then show a message while we’re saving data:

src/routes/+page

<ul class="todos">
	<!-- ... -->
</ul>

{#if creating}
	<span class="saving">saving...</span>
{/if}

In the case of deletions, we don’t really need to wait for the server to validate anything — we can just update the UI immediately:

src/routes/+page

<ul class="todos">
	{#each data.todos.filter((todo) => !deleting.includes(todo.id)) as todo (todo.id)}
		<li in:fly={{ y: 20 }} out:slide>
			<form
				method="POST"
				action="?/delete"
				use:enhance={() => {
					deleting = [...deleting, todo.id];
					return async ({ update }) => {
						await update();
						deleting = deleting.filter((id) => id !== todo.id);
					};
				}}
			>
				<input type="hidden" name="id" value={todo.id} />
				<button aria-label="Mark as complete">✔</button>

				{todo.description}
			</form>
		</li>
	{/each}
</ul>

use:enhance is very customizable — you can cancel() submissions, handle redirects, control whether the form is reset, and so on. See the docs for full details.

Edit this page on GitHub

previous next

Progressive enhancement GET handlers

<script>

	import { fly, slide } from 'svelte/transition';

	import { enhance } from '$app/forms';

	let { data, form } = $props();

</script>

<div class="centered">

	<h1>todos</h1>

	{#if form?.error}

		<p class="error">{form.error}</p>

	{/if}

	<form method="POST" action="?/create" use:enhance>

		<label>

			add a todo:

			<input

				name="description"

				value={form?.description ?? ''}

				autocomplete="off"

				required

/>

		</label>

	</form>

	<ul class="todos">

		{#each data.todos as todo (todo.id)}

			<li in:fly={{ y: 20 }} out:slide>

				<form method="POST" action="?/delete" use:enhance>

					<input type="hidden" name="id" value={todo.id} />

					<span>{todo.description}</span>

					<button aria-label="Mark as complete"></button>

				</form>

			</li>

		{/each}

	</ul>

</div>

<style>

	.centered {

		max-width: 20em;

		margin: 0 auto;

	label {

		width: 100%;

	input {

		flex: 1;

	span {

		flex: 1;

	button {

		border: none;

		background: url(./remove.svg) no-repeat 50% 50%;

		background-size: 1rem 1rem;

		cursor: pointer;

		height: 100%;

		aspect-ratio: 1;

		opacity: 0.5;

		transition: opacity 0.2s;

	button:hover {

		opacity: 1;

	.saving {

		opacity: 0.5;

</style>

show text show editor