{"id":21971443,"url":"https://github.com/svecosystem/formsnap","last_synced_at":"2025-05-15T08:05:09.822Z","repository":{"id":191534620,"uuid":"684849398","full_name":"svecosystem/formsnap","owner":"svecosystem","description":"Functional, accessible, and powerful form components for Svelte. 🫰 ","archived":false,"fork":false,"pushed_at":"2025-04-15T21:31:31.000Z","size":4426,"stargazers_count":684,"open_issues_count":1,"forks_count":28,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-04-21T20:46:37.612Z","etag":null,"topics":["accessibility","form-controls","form-handling","forms","svelte","svelte-form","svelte-form-validation","svelte-forms","sveltekit","sveltekit-actions","sveltekit-forms","zod-validation"],"latest_commit_sha":null,"homepage":"https://formsnap.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/svecosystem.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["huntabyte"],"patreon":null,"open_collective":null,"ko_fi":"huntabyte","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2023-08-30T01:27:17.000Z","updated_at":"2025-04-21T11:40:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"e22e8a62-60bb-4d52-98c2-b170f6683343","html_url":"https://github.com/svecosystem/formsnap","commit_stats":null,"previous_names":["huntabyte/form","svecosystem/formsnap"],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fformsnap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fformsnap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fformsnap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fformsnap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svecosystem","download_url":"https://codeload.github.com/svecosystem/formsnap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254301426,"owners_count":22047902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","form-controls","form-handling","forms","svelte","svelte-form","svelte-form-validation","svelte-forms","sveltekit","sveltekit-actions","sveltekit-forms","zod-validation"],"created_at":"2024-11-29T14:50:27.278Z","updated_at":"2025-05-15T08:05:09.795Z","avatar_url":"https://github.com/svecosystem.png","language":"TypeScript","readme":"# Formsnap\n\n\u003c!-- automd:badges license name=\"formsnap\" color=\"blue\" github=\"svecosystem/formsnap\" --\u003e\n\n[![npm version](https://flat.badgen.net/npm/v/formsnap?color=blue)](https://npmjs.com/package/formsnap)\n[![npm downloads](https://flat.badgen.net/npm/dm/formsnap?color=blue)](https://npmjs.com/package/formsnap)\n[![license](https://flat.badgen.net/github/license/svecosystem/formsnap?color=blue)](https://github.com/svecosystem/formsnap/blob/main/LICENSE)\n\n\u003c!-- /automd --\u003e\n\n[![](https://dcbadge.vercel.app/api/server/fdXy3Sk8Gq?style=flat)](https://discord.gg/fdXy3Sk8Gq)\n\nThe 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.\n\n## Installation\n\n```bash\nnpm i formsnap sveltekit-superforms \u003cyour-schema-library\u003e\n```\n\n## Usage\n\nYou'll handle the initial Superforms setup just as you normally would, where you define a schema and return the form from your load function.\n\n#### 1. Define a Zod schema\n\n```ts\n// schemas.ts\nimport { z } from \"zod\";\nexport const settingsFormSchema = z.object({\n\temail: z.string().email(),\n\tbio: z.string().max(250).optional(),\n\tmarketingEmails: z.boolean().default(true),\n\tlanguage: z.enum([\"en\", \"es\", \"fr\"]).default(\"en\"),\n\ttheme: z.enum([\"light\", \"dark\"]).default(\"light\"),\n});\n```\n\n#### 2. Return the form from your load function\n\n```ts\n// +page.server.ts\nimport { superValidate } from \"sveltekit-superforms\";\nimport { zod } from \"sveltekit-superforms/adapters\";\nimport type { PageServerLoad } from \"./$types\";\nimport { settingsFormSchema } from \"./schemas\";\n\nexport const load: PageServerLoad = async () =\u003e {\n\treturn {\n\t\tform: await superValidate(zod(settingsFormSchema)),\n\t};\n};\n```\n\n#### 3. Construct the form in your page\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { Field, Label, FieldErrors, Control, Description, Fieldset, Legend } from \"formsnap\";\n\timport { settingsFormSchema } from \"./schemas\";\n\timport { superForm } from \"sveltekit-superforms\";\n\timport { zodClient } from \"sveltekit-superforms/adapters\";\n\n\tlet { data } = $props();\n\n\tconst form = superForm(data.form, {\n\t\tvalidators: zodClient(settingsFormSchema),\n\t});\n\n\tconst { form: formData, enhance } = form;\n\u003c/script\u003e\n\n\u003cform method=\"POST\" use:enhance\u003e\n\t\u003cField {form} name=\"email\"\u003e\n\t\t\u003cControl\u003e\n\t\t\t{#snippet children({ props })}\n\t\t\t\t\u003cLabel\u003eEmail\u003c/Label\u003e\n\t\t\t\t\u003cinput type=\"email\" {...props} bind:value={$formData.email} /\u003e\n\t\t\t{/snippet}\n\t\t\u003c/Control\u003e\n\t\t\u003cDescription\u003eWe'll provide critical updates about your account via email.\u003c/Description\u003e\n\t\t\u003cFieldErrors /\u003e\n\t\u003c/Field\u003e\n\n\t\u003cField {form} name=\"bio\"\u003e\n\t\t\u003cControl\u003e\n\t\t\t{#snippet children({ props })}\n\t\t\t\t\u003cLabel\u003eBio\u003c/Label\u003e\n\t\t\t\t\u003ctextarea bind:value={$formData.bio} {...props} /\u003e\n\t\t\t{/snippet}\n\t\t\u003c/Control\u003e\n\t\t\u003cFieldErrors /\u003e\n\t\u003c/Field\u003e\n\n\t\u003cField {form} name=\"language\"\u003e\n\t\t\u003cControl\u003e\n\t\t\t{#snippet children({ props })}\n\t\t\t\t\u003cLabel\u003eLanguage\u003c/Label\u003e\n\t\t\t\t\u003cselect {...props} bind:value={$formData.language}\u003e\n\t\t\t\t\t\u003coption value=\"en\"\u003eEnglish\u003c/option\u003e\n\t\t\t\t\t\u003coption value=\"es\"\u003eSpanish\u003c/option\u003e\n\t\t\t\t\t\u003coption value=\"fr\"\u003eFrench\u003c/option\u003e\n\t\t\t\t\u003c/select\u003e\n\t\t\t{/snippet}\n\t\t\u003c/Control\u003e\n\t\t\u003cFieldErrors /\u003e\n\t\u003c/Field\u003e\n\n\t\u003cField {form} name=\"marketingEmails\"\u003e\n\t\t\u003cControl\u003e\n\t\t\t{#snippet children({ props })}\n\t\t\t\t\u003cLabel\u003eReceive marketing emails from us\u003c/Label\u003e\n\t\t\t\t\u003cinput type=\"checkbox\" {...props} bind:checked={$formData.marketingEmails} /\u003e\n\t\t\t{/snippet}\n\t\t\u003c/Control\u003e\n\t\t\u003cFieldErrors /\u003e\n\t\u003c/Field\u003e\n\n\t\u003cFieldset {form} name=\"theme\"\u003e\n\t\t\u003cLegend\u003eSelect your theme\u003c/Legend\u003e\n\t\t{#each [\"light\", \"dark\"] as theme}\n\t\t\t\u003cControl\u003e\n\t\t\t\t{#snippet children({ props })}\n\t\t\t\t\t\u003cinput {...props} type=\"radio\" bind:group={$formData.theme} value={theme} /\u003e\n\t\t\t\t\t\u003cLabel\u003e{theme}\u003c/Label\u003e\n\t\t\t\t{/snippet}\n\t\t\t\u003c/Control\u003e\n\t\t{/each}\n\t\t\u003cFieldErrors /\u003e\n\t\u003c/Fieldset\u003e\n\n\t\u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\nCheck out [Formsnap.dev](https://formsnap.dev) for more documentation.\n\n## Sponsors\n\nThis project is supported by the following beautiful people/organizations:\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sponsors/huntabyte\"\u003e\n    \u003cimg src='https://cdn.jsdelivr.net/gh/huntabyte/static/sponsors.svg' alt=\"Logos from Sponsors\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\n\u003c!-- automd:contributors license=MIT author=\"huntabyte\" github=\"svecosystem/formsnap\" --\u003e\n\nPublished under the [MIT](https://github.com/svecosystem/formsnap/blob/main/LICENSE) license.\nMade by [@huntabyte](https://github.com/huntabyte) and [community](https://github.com/svecosystem/formsnap/graphs/contributors) 💛\n\u003cbr\u003e\u003cbr\u003e\n\u003ca href=\"https://github.com/svecosystem/formsnap/graphs/contributors\"\u003e\n\u003cimg src=\"https://contrib.rocks/image?repo=svecosystem/formsnap\" /\u003e\n\u003c/a\u003e\n\n\u003c!-- /automd --\u003e\n\n## Community\n\nJoin the Discord server to ask questions, find collaborators, or just say hi!\n\n\u003ca href=\"https://discord.gg/fdXy3Sk8Gq\" alt=\"Svecosystem Discord community\"\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://invidget.switchblade.xyz/fdXy3Sk8Gq\"\u003e\n  \u003cimg alt=\"Svecosystem Discord community\" src=\"https://invidget.switchblade.xyz/fdXy3Sk8Gq?theme=light\"\u003e\n\u003c/picture\u003e\n\u003c/a\u003e\n","funding_links":["https://github.com/sponsors/huntabyte","https://ko-fi.com/huntabyte"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvecosystem%2Fformsnap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvecosystem%2Fformsnap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvecosystem%2Fformsnap/lists"}