# Formsnap Building forms with Formsnap, Superforms, & Zod. [Docs](https://formsnap.dev) Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex. Well-designed HTML forms are: - Well-structured and semantically correct. - Easy to use and navigate (keyboard). - Accessible with ARIA attributes and proper labels. - Has support for client and server side validation. - Well-styled and consistent with the rest of the application. In this guide, we will take a look at building forms with [formsnap](https://formsnap.dev), [sveltekit-superforms](https://superforms.rocks) and [zod](https://zod.dev). ## Features The `Form` components offered by `shadcn-svelte` are wrappers around `formsnap` & `sveltekit-superforms` which provide a few things: - Composable components for building forms. - Form field components for scoping form state. - Form validation using [Zod](https://zod.dev) or any other validation library supported by [Superforms](https://superforms.rocks) . - Applies the correct `aria` attributes to form fields based on states. - Enables you to easily use various components like [Select](https://shadcn-svelte.com/docs/components/select) , [RadioGroup](https://shadcn-svelte.com/docs/components/radio-group) , [Switch](https://shadcn-svelte.com/docs/components/switch) , [Checkbox](https://shadcn-svelte.com/docs/components/checkbox) and other form components with forms. If you aren't familiar with [Superforms](https://superforms.rocks) & [Formsnap](https://formsnap.dev), you should check out their documentation first, as this guide assumes you have a basic understanding of how they work together. ## Anatomy ```svelte ``` ## Example ```svelte ``` ## Installation ```bash pnpm dlx shadcn-svelte@latest add form ``` ```bash npx shadcn-svelte@latest add form ``` ```bash bun x shadcn-svelte@latest add form ``` ## Usage ### Create a form schema Define the shape of your form using a Zod schema. You can read more about using Zod in the [Zod documentation](https://zod.dev). We're going to define it in a file called `schema.ts` in the same directory as our page component, but you can put it anywhere you like. src/routes/settings/schema.ts ```ts import { z } from "zod"; export const formSchema = z.object({ username: z.string().min(2).max(50), }); export type FormSchema = typeof formSchema; ``` ### Setup the load function src/routes/settings/+page.server.ts ```ts import type { PageServerLoad } from "./$types.js"; import { superValidate } from "sveltekit-superforms"; import { formSchema } from "./schema"; import { zod4 } from "sveltekit-superforms/adapters"; export const load: PageServerLoad = async () => { return { form: await superValidate(zod4(formSchema)), }; }; ``` ### Create form component For this example, we'll be passing the `form` returned from the load function as a prop to this component. To ensure it's typed properly, we'll use the `SuperValidated` type from `sveltekit-superforms`, and pass in the type of our form schema. src/routes/settings/settings-form.svelte ```svelte ``` The `name`, `id`, and all accessibility attributes are applied to the input by spreading the `attrs` object from the `Form.Control` component. The `Form.Label` will automatically be associated with the input using the `for` attribute, so you don't have to worry about that. ### Use the component We'll pass the `form` from the data returned from the load function to the form component we created above. src/routes/settings/+page.svelte ```svelte ``` ### Create an Action src/routes/settings/+page.server.ts ```ts import type { PageServerLoad, Actions } from "./$types.js"; import { fail } from "@sveltejs/kit"; import { superValidate } from "sveltekit-superforms"; import { zod4 } from "sveltekit-superforms/adapters"; import { formSchema } from "./schema"; export const load: PageServerLoad = async () => { return { form: await superValidate(zod4(formSchema)), }; }; export const actions: Actions = { default: async (event) => { const form = await superValidate(event, zod4(formSchema)); if (!form.valid) { return fail(400, { form, }); } return { form, }; }, }; ``` ### Done That's it. You now have a fully accessible form that is type-safe and has client & server side validation. ```svelte ``` ## Next Steps Be sure to check out the [Formsnap](https://formsnap.dev) and [Superforms](https://superforms.rocks) documentation for more information on how to use them. ## Examples See the following links for more examples on how to use the other `Form` components: - [Checkbox](https://shadcn-svelte.com/docs/components/checkbox#form) - [Date Picker](https://shadcn-svelte.com/docs/components/date-picker#form) - [Input](https://shadcn-svelte.com/docs/components/input#form) - [Radio Group](https://shadcn-svelte.com/docs/components/radio-group#form) - [Select](https://shadcn-svelte.com/docs/components/select#form) - [Switch](https://shadcn-svelte.com/docs/components/switch#form) - [Textarea](https://shadcn-svelte.com/docs/components/textarea#form)