svelte-forma

Svelte Forma

• 📦 Super light 3.3kb (1.5k gzip)
• 🚀 Very easy to use
• 😎 Minimum API for the best experience
• 🔥 Reactive
• 🗒 Type safe
• 🖋 Controllable inputs

npm install svelte-forma # or yarn add svelte-forma

<!-- Form.svelte -->
<script>
  import { useForm } from "svelte-forma";
  import ErrorMessage from "./ErrorMessage"

  const { form, handleSubmit, validators, formState } = useForm();

  let name = "";
  let agree = false
</script>

<form use:form on:submit={handleSubmit(() => {
  console.log("submitted", name)

  name = ""
})}>
  <input
    name="name"
    bind:value={name}
    use:validators={[
      (value) => Boolean(value) || "Field is required"
    ]}
  />

  <ErrorMessage name="name" {formState} />

  <input
    name="agree"
    use:validators={[
      (value) => value === 'true' || 'Field is required';
    ]}
    type="checkbox"
    on:input={(e) => {
      agree = e.currentTarget.checked;
    }}
    checked={agree}
    value={agree}
  />

  <ErrorMessage name="agree" {formState} />

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

<!-- ErrorMessage.svelte -->
<script lang="ts">
	import type { IFormState } from 'svelte-forma/dist/IForm';
	import type { Writable } from 'svelte/store';

	export let formState: Writable<IFormState>;
	export let name: string;
</script>

{#if $formState?.errors?.[name] && $formState?.touched?.[name] && $formState?.dirty?.[name]}
	<div>
		<span class="font-medium text-sm text-red-500">
			{$formState?.errors?.[name]}
		</span>
	</div>
{/if}