Svelte simple forms

Simple forms for svelte! Heavily inspired by mantine-forms.

Status: Experimental

You are welcome to test the library, and support it by reporting bugs and suggesting features.

But please be aware that the API is not stable yet, and it may change in the future.

Do not expect a stable release before version 2.0.0.

Installation

npm

1npm install --save-dev @svelio/svelte-simple-forms

yarn

1yarn add -D @svelio/svelte-simple-forms

Usage

Basic usage

1<script>
2	import { createForm } from '@svelio/svelte-simple-forms';
3
4	const { getInput, getForm, values } = createForm({
5		initialValues: {
6			name: '',
7			email: ''
8		}
9	});
10</script>
11
12<form use:form={$values}>
13	<input use:getInput={'name'} />
14	<input use:getInput={'email'} />
15
16	<button type="submit">Submit</button>
17</form>
18
19<p>Name: {$values.name}</p>
20<p>Email: {$values.email}</p>

Form validation

1<script>
2	import { createForm } from '@svelio/svelte-simple-forms';
3
4	const { getInput, getForm, values, errors } = createForm({
5		initialValues: {
6			name: '',
7			email: ''
8		},
9		validate: {
10			name: (value) => !value && 'Name is required',
11			email: (value) => !value && 'Email is required'
12		}
13	});
14</script>
15
16<form use:form={$values}>
17	<input use:getInput={'name'} />
18	{#if $errors.name}
19		<p>{$errors.name}</p>
20	{/if}
21
22	<input use:getInput={'email'} />
23	{#if $errors.email}
24		<p>{$errors.email}</p>
25	{/if}
26
27	<button type="submit">Submit</button>
28
29	<p>Name: {$values.name}</p>
30	<p>Email: {$values.email}</p>
31</form>

Roadmap

• Basic form functionality
• Form validation
• Support for custom input components (multi select, date picker, etc)
• Form validation with yup
• Form validation with zod
• Form parsing (e.g. parse string to number)