📝 Svelte Simple Form

A lightweight, type-safe, and reactive form state management hook for Svelte 5, featuring:

• Simply usage
• Zero dependencies
• Nested field paths support
• Dirty tracking, touched fields, and submission state
• Designed for Svelte 5’s new reactive primitives

The library exposes two primary hooks:

• useForm — minimal form state and submission handling
• useFormControl — full form control with validation, state tracking, and field bindings

🚀 Installation

npm install svelte-simple-form

Guide & Documentation

Check Svelte Simple Form docs Check Svelte Simple Form Usages

🧑‍💻 Example Usage (useForm)

<script lang="ts">
	import { useForm } from 'svelte-simple-form';

	const { form } = useForm({
		initialValues: {
			name: 'John',
			email: '',
			age: 10
		},
		onSubmit: async (values) => {
			await new Promise((resolve) => setTimeout(resolve, 2000));
			console.log(values);
		}
	});
</script>

<form use:form.handler>
	<input type="text" bind:value={form.data.name} placeholder="Name" />
	<input type="email" bind:value={form.data.email} placeholder="email" />
	<input type="number" bind:value={form.data.age} placeholder="Age" />
	<button type="submit" disabled={form.isSubmitting}>
		{form.isSubmitting ? 'Submitting...' : 'Submit'}
	</button>
	<button type="button" onclick={() => form.reset()}> Reset </button>
</form>

🧑‍💻 Example Usage (useFormControl / Form Control)

Use useFormControl when you need field-level control, such as validation, dirty/touched tracking, or array fields.

<script lang="ts">
	import { useFormControl } from 'svelte-simple-form';

	const { form, control } = useFormControl({
		initialValues: {
			name: '',
			email: '',
			age: 0
		},
		onSubmit: async (values) => {
			await new Promise((resolve) => setTimeout(resolve, 2000));
			console.log(values);
		}
	});
</script>

<form use:form.handler>
	<input type="text" placeholder="Name" use:control={'name'} />

	<input type="email" placeholder="Email" use:control={'email'} />

	<input
		type="number"
		placeholder="Age"
		use:control={{
			field: 'age',
			valueAsNumber: true
		}}
	/>

	{#if form.errors.name}
		<p class="error">{form.errors.name?.join(', ')}</p>
	{/if}

	<button type="submit" disabled={form.isSubmitting || !form.isValid}>
		{form.isSubmitting ? 'Submitting...' : 'Submit'}
	</button>

	<button type="button" on:click={() => form.reset()}> Reset </button>
</form>

When to use useFormControl

• You need validation
• You want to track dirty / touched fields
• You want inputs to react to form state changes
• You work with nested or array fields
• You want consistent behavior across all inputs

If you only need basic submit/reset handling, prefer useForm.