Gathering detailed insights and metrics for svelte-simple-form
Gathering detailed insights and metrics for svelte-simple-form
Gathering detailed insights and metrics for svelte-simple-form
Gathering detailed insights and metrics for svelte-simple-form
svelte-simple-forms
Simple client side form validation without schemas for Svelte and SvelteKit
@svelio/svelte-simple-forms
Simple forms for svelte! Heavily inspired by [mantine-forms](https://github.com/mantinedev/mantine/tree/master/src/mantine-form).
@simple-svelte-ui/forms
Simple svelte ui Forms extension
simple-form-manager-v2
Simple form Manager V2
A simple yet powerful, lightweight form handling library for Svelte 5 integrates seamlessly with Zod validation
npm install svelte-simple-form
Typescript
Module System
Node Version
NPM Version
TypeScript (52.77%)
Svelte (35.48%)
JavaScript (8.72%)
HTML (1.87%)
CSS (1.16%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
5 Stars
81 Commits
1 Forks
2 Watchers
2 Branches
2 Contributors
Updated on Jun 05, 2025
Latest Version
0.2.5
Package Id
svelte-simple-form@0.2.5
Unpacked Size
21.72 kB
Size
6.62 kB
File Count
10
NPM Version
10.9.0
Node Version
22.11.0
Published on
Jun 05, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
1
23
A lightweight, type-safe, and reactive form state management hook for Svelte 5, featuring:
1npm install svelte-simple-form
Optionally use Zod for validation
1npm install zod
Note: This hook is built to work seamlessly with Svelte 5's reactive system, using $state
, $effect
, and tick
. Make sure your project is on Svelte 5 or later.
useForm<T>(props: FormProps<T>)
Creates and returns the reactive form
object managing form state, validation, and events.
Name | Type | Description |
---|---|---|
initialValues | T Automatically | Initial values for the form fields. |
validation | { zod: schema, relatedFields: Record<string, string[]> } | Zod schema & related field validation. |
onSubmit | Optional async callback | Called on successful submission. |
onChange | Optional callback | Called on any field update. |
onReset | Optional callback | Called when form resets. |
1{ 2 form: { 3 initialValues: T; 4 data: T; 5 errors: Record<Path<T>, string[] | undefined>; 6 isValid: boolean; 7 isSubmitting: boolean; 8 isDirty: boolean; 9 touched: Record<Path<T>, boolean | undefined>; 10 11 setInitialValues(values: T, options?: { reset?: boolean }): void; 12 setIsDirty(dirty?: boolean): void; 13 setIsSubmitting(submitting?: boolean): void; 14 15 reset(): void; 16 resetField(field: Path<T>): void; 17 18 setError(field: Path<T>, error: string | string[]): void; 19 20 validate(field?: Path<T> | Path<T>[]): boolean; 21 22 submit(callback?: (data: T) => any): Promise<void>; 23 24 handler(node: HTMLFormElement): void; 25 } 26}
setInitialValues(values: T, options?: { reset?: boolean })
setIsDirty(dirty?: boolean)
setIsSubmitting(submitting?: boolean)
reset()
onReset
callback if provided.resetField(field: Path<T>)
setError(field: Path<T>, error: string | string[])
validate(field?: Path<T> | Path<T>[])
true
if form is valid; false
otherwise.submit(callback?: (data: T) => any)
onSubmit
.isSubmitting
state during async submission.handler(node: HTMLFormElement)
submit()
automatically on submit event, preventing default browser submission.Property | Type | Description | |
---|---|---|---|
form.data | T | Current form data, bind inputs here. | |
form.errors | Record<Path<T>, string[] or undefined> | Validation errors keyed by path. | |
form.isValid | boolean | True if form has no validation errors. | |
form.isSubmitting | boolean | True if form is currently submitting. | |
form.isDirty | boolean | True if form data differs from initial values. | |
form.touched | Record\<Path<T>, boolean or undefined> | Tracks which fields have been modified. |
1<script lang="ts"> 2 import { useForm } from 'svelte-simple-form'; 3 import { z } from 'zod'; 4 5 let submitJson = $state(''); 6 7 const schema = z.object({ 8 name: z.string().min(1, 'Name is required'), 9 email: z.string().email("This isn't an email"), 10 age: z.number().min(18, 'Must be at least 18') 11 }); 12 13 const { form } = useForm({ 14 initialValues: { name: '', email: '', age: 0 }, 15 validation: { zod: schema }, 16 onSubmit: async (data) => { 17 submitJson = JSON.stringify(data); 18 console.log(`Submitted: ${JSON.stringify(data)}`); 19 }, 20 onChange: (field, value) => { 21 submitJson = ''; 22 console.log(`Field ${field} changed to`, value); 23 }, 24 onReset: () => { 25 console.log('Form was reset'); 26 } 27 }); 28 29 function setEmailError() { 30 form.setError('email', 'Email really exit in db'); 31 } 32</script> 33 34<div> 35 <form use:form.handler> 36 <!-- user name input --> 37 <div> 38 <input type="text" bind:value={form.data.name} placeholder="Name" /> 39 {#if form.errors['name']?.length} 40 <p>{form.errors['name'][0]}</p> 41 {/if} 42 </div> 43 44 <!-- user email input --> 45 <div> 46 <input type="email" bind:value={form.data.email} placeholder="email" /> 47 {#if form.errors['email']?.length} 48 <p>{form.errors['email'][0]}</p> 49 {/if} 50 </div> 51 52 <!-- form handler --> 53 <div> 54 <button type="submit" disabled={form.isSubmitting}> 55 {form.isSubmitting ? 'Submitting...' : 'Submit'} 56 </button> 57 <button type="button" onclick={() => form.reset()}> Reset </button> 58 <button type="button" onclick={() => setEmailError()}> setEmailError </button> 59 </div> 60 </form> 61 <div> 62 {#if submitJson} 63 <pre> 64 {submitJson} 65 </pre> 66 {/if} 67 </div> 68</div>
$state
, $effect
, tick
).Path<T>
.onChange
is triggered for every changed field with path and new value.form.isDirty
to track if the user has modified the form.resetField
allows fine-grained reset of individual nested fields.setError
allows manual setting of errors for specific fields.form.handler
directive to bind submit event easily.form.{state} = value
for manually change state valueform.{data|errors|touched}.{field} = value
for manually change state field valueinitialValues
does not support nested string paths (like "body.height"), use objects instead.No vulnerabilities found.
No security vulnerabilities found.