@svelio/svelte-simple-forms NPM

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

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

yarn

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

Usage

Basic usage

<script>
	import { createForm } from '@svelio/svelte-simple-forms';

	const { getInput, getForm, values } = createForm({
		initialValues: {
			name: '',
			email: ''
		}
	});
</script>

<form use:form={$values}>
	<input use:getInput={'name'} />
	<input use:getInput={'email'} />

	<button type="submit">Submit</button>
</form>

<p>Name: {$values.name}</p>
<p>Email: {$values.email}</p>

Form validation

<script>
	import { createForm } from '@svelio/svelte-simple-forms';

	const { getInput, getForm, values, errors } = createForm({
		initialValues: {
			name: '',
			email: ''
		},
		validate: {
			name: (value) => !value && 'Name is required',
			email: (value) => !value && 'Email is required'
		}
	});
</script>

<form use:form={$values}>
	<input use:getInput={'name'} />
	{#if $errors.name}
		<p>{$errors.name}</p>
	{/if}

	<input use:getInput={'email'} />
	{#if $errors.email}
		<p>{$errors.email}</p>
	{/if}

	<button type="submit">Submit</button>

	<p>Name: {$values.name}</p>
	<p>Email: {$values.email}</p>
</form>