https://github.com/svecosystem/formsnap

Functional, accessible, and powerful form components for Svelte. 🫰
https://github.com/svecosystem/formsnap

accessibility form-controls form-handling forms svelte svelte-form svelte-form-validation svelte-forms sveltekit sveltekit-actions sveltekit-forms zod-validation

Last synced: 3 days ago
JSON representation

Functional, accessible, and powerful form components for Svelte. 🫰

• Host: GitHub
• URL: https://github.com/svecosystem/formsnap
• Owner: svecosystem
• License: mit
• Created: 2023-08-30T01:27:17.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-16T16:31:51.000Z (about 1 month ago)
• Last Synced: 2025-01-15T13:47:40.862Z (10 days ago)
• Topics: accessibility, form-controls, form-handling, forms, svelte, svelte-form, svelte-form-validation, svelte-forms, sveltekit, sveltekit-actions, sveltekit-forms, zod-validation
• Language: TypeScript
• Homepage: https://formsnap.dev
• Size: 4.09 MB
• Stars: 631
• Watchers: 9
• Forks: 29
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome - svecosystem/formsnap - Functional, accessible, and powerful form components for Svelte. 🫰 (TypeScript)
• awesome - svecosystem/formsnap - Functional, accessible, and powerful form components for Svelte. 🫰 (TypeScript)

README

        
# Formsnap

[![npm version](https://flat.badgen.net/npm/v/formsnap?color=blue)](https://npmjs.com/package/formsnap)

[![npm downloads](https://flat.badgen.net/npm/dm/formsnap?color=blue)](https://npmjs.com/package/formsnap)

[![license](https://flat.badgen.net/github/license/svecosystem/formsnap?color=blue)](https://github.com/svecosystem/formsnap/blob/main/LICENSE)

[![](https://dcbadge.vercel.app/api/server/fdXy3Sk8Gq?style=flat)](https://discord.gg/fdXy3Sk8Gq)

The goal of this library is to make working with the already incredible [sveltekit-superforms](https://github.com/ciscoheat/sveltekit-superforms) even more pleasant, by wrapping it with accessible form components.

## Installation

```bash

npm i formsnap sveltekit-superforms 

```

## 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

```ts

// schemas.ts

import { z } from "zod";

export const settingsFormSchema = z.object({

	email: z.string().email(),

	bio: z.string().max(250).optional(),

	marketingEmails: z.boolean().default(true),

	language: z.enum(["en", "es", "fr"]).default("en"),

	theme: z.enum(["light", "dark"]).default("light"),

});

```

#### 2. Return the form from your load function

```ts

// +page.server.ts

import { superValidate } from "sveltekit-superforms";

import { zod } from "sveltekit-superforms/adapters";

import type { PageServerLoad } from "./$types";

import { settingsFormSchema } from "./schemas";

export const load: PageServerLoad = async () => {

	return {

		form: await superValidate(zod(settingsFormSchema)),

	};

};

```

#### 3. Construct the form in your page

```svelte

	import { Field, Label, FieldErrors, Control, Description, Fieldset, Legend } from "formsnap";

	import { settingsFormSchema } from "./schemas";

	import { superForm } from "sveltekit-superforms";

	import { zodClient } from "sveltekit-superforms/adapters";

	let { data } = $props();

	const form = superForm(data.form, {

		validators: zodClient(settingsFormSchema),

	});

	const { form: formData, enhance } = form;

	

		

			{#snippet children({ props })}

				Email

				

			{/snippet}

		

		We'll provide critical updates about your account via email.

		

	

	

		

			{#snippet children({ props })}

				Bio

				

			{/snippet}

		

		

	

	

		

			{#snippet children({ props })}

				Language

				

					English

					Spanish

					French

				

			{/snippet}

		

		

	

	

		

			{#snippet children({ props })}

				Receive marketing emails from us

				

			{/snippet}

		

		

	

	

		Select your theme

		{#each ["light", "dark"] as theme}

			

				{#snippet children({ props })}

					

					{theme}

				{/snippet}

			

		{/each}

		

	

	Submit

```

Check out [Formsnap.dev](https://formsnap.dev) for more documentation.

## Sponsors

This project is supported by the following beautiful people/organizations:



  

    

  



## License

Published under the [MIT](https://github.com/svecosystem/formsnap/blob/main/LICENSE) license.

Made by [@huntabyte](https://github.com/huntabyte) and [community](https://github.com/svecosystem/formsnap/graphs/contributors) 💛











## Community

Join the Discord server to ask questions, find collaborators, or just say hi!