Formsnap

The goal of this library is to make working with the already incredible sveltekit-superforms even more pleasant, by wrapping it with accessible form components.

Installation

1npm i formsnap sveltekit-superforms <your-schema-library>

Usage

You'll handle the initial Superforms setup just as you normally would, where you define a schema and return the form from your load function.

1. Define a Zod schema

1// schemas.ts
2import { z } from "zod";
3export const settingsFormSchema = z.object({
4	email: z.string().email(),
5	bio: z.string().max(250).optional(),
6	marketingEmails: z.boolean().default(true),
7	language: z.enum(["en", "es", "fr"]).default(["en"]),
8	theme: z.enum(["light", "dark"]).default(["light"]),
9});

2. Return the form from your load function

1// +page.server.ts
2import { superValidate } from "sveltekit-superforms";
3import { zod } from "sveltekit-superforms/adapters";
4import type { PageServerLoad } from "./$types";
5import { settingsFormSchema } from "./schemas";
6
7export const load: PageServerLoad = async () => {
8	return {
9		form: await superValidate(zod(settingsFormSchema)),
10	};
11};

3. Construct the form in your page

1<script lang="ts">
2	import { Field, Label, FieldErrors, Control, Description, Fieldset, Legend } from "formsnap";
3	import { settingsFormSchema } from "./schemas";
4	import { superForm } from "sveltekit-superforms";
5	import { zodClient } from "sveltekit-superforms/adapters";
6
7	export let data;
8
9	const form = superForm(data.form, {
10		validators: zodClient(settingsFormSchema),
11	});
12
13	const { form: formData, enhance } = form;
14</script>
15
16<form method="POST" use:enhance>
17	<Field {form} name="email">
18		<Control let:attrs>
19			<Label>Email</Label>
20			<input type="email" {...attrs} bind:value={$formData.email} />
21		</Control>
22		<Description>We'll provide critical updates about your account via email.</Description>
23		<FieldErrors />
24	</Field>
25
26	<Field {form} name="bio">
27		<Control let:attrs>
28			<Label>Bio</Label>
29			<textarea bind:value={$formData.bio} {...attrs} />
30		</Control>
31		<FieldErrors />
32	</Field>
33
34	<Field {form} name="language">
35		<Control let:attrs>
36			<Label>Language</Label>
37			<select {...attrs} bind:value={$formData.language}>
38				<option value="en">English</option>
39				<option value="es">Spanish</option>
40				<option value="fr">French</option>
41			</select>
42		</Control>
43		<FieldErrors />
44	</Field>
45
46	<Field {form} name="marketingEmails">
47		<Control let:attrs>
48			<Label>Receive marketing emails from us</Label>
49			<input type="checkbox" {...attrs} bind:checked={$formData.marketingEmails} />
50		</Control>
51		<FieldErrors />
52	</Field>
53
54	<Fieldset {form} name="theme">
55		<Legend>Select your theme</Legend>
56		{#each ["light", "dark"] as theme}
57			<Control let:attrs>
58				<input {...attrs} type="radio" bind:group={$formData.theme} value={theme} />
59				<Label>{theme}</Label>
60			</Control>
61		{/each}
62		<FieldErrors />
63	</Fieldset>
64
65	<button type="submit">Submit</button>
66</form>

Check out Formsnap.dev for more documentation.