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.
npm i formsnap sveltekit-superforms zodYou'll handle the initial Superforms setup just as you normally would, where you define a schema and return the form from your load function. The magic happens once you have access to that form inside of your page component.
// schemas.ts
import { z } from "zod";
export const settingsFormSchema = z.object({
email: z.string().email(),
bio: z.string().max(250).optional(),
language: z.enum(["en", "es", "fr"]),
marketingEmails: z.boolean().default(true),
theme: z.enum(["light", "dark"]).default("light")
});// page.server.ts
import { superValidate } from "sveltekit-superforms/server";
import type { PageServerLoad } from "./$types";
import { settingsFormSchema } from "./schemas";
export const load: PageServerLoad = async () => {
return {
form: superValidate(settingsFormSchema)
};
};<script lang="ts">
import { Form } from "@huntabyte/form";
import { settingsFormSchema } from "./schemas";
import type { PageData } from "./$types";
export let data: PageData;
</script>
<Form.Root
schema={settingsFormSchema}
form={data.form}
let:config
action="?/someAction"
>
<Form.Field {config} name="email">
<Form.Label>Email</Form.Label>
<Form.Input />
<Form.Validation />
</Form.Field>
<Form.Field {config} name="bio">
<Form.Label>Bio</Form.Label>
<Form.Textarea />
<Form.Validation />
</Form.Field>
<Form.Field {config} name="language">
<Form.Label>Language</Form.Label>
<Form.Select>
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
</Form.Select>
<Form.Validation />
</Form.Field>
<Form.Field {config} name="marketingEmails">
<Form.Checkbox />
<Form.Label>Receive marketing emails from us</Form.Label>
<Form.Validation />
</Form.Field>
<Form.Field {config} name="theme">
<Form.RadioItem value="light" />
<Form.Label>Light</Form.Label>
<Form.Validation />
</Form.Field>
<Form.Field {config} name="theme">
<Form.RadioItem value="dark" />
<Form.Label>Dark</Form.Label>
<Form.Validation />
</Form.Field>
<button type="submit">Submit</button>
</Form.Root>Check out Formsnap.dev for more documentation.