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>
Roadmap
