Felte: A form library for vanilla JS

Felte is an extensible form library originally built for Svelte. This package removes all integrations with frameworks so it can be used with vanilal JS. Unlike @felte/core, this package already comes with a store implementation. Felte, on its most simple form, only requires you to pass it your <form> element. No custom Fieldor Form components are needed, making custom styles really easy to do.

Features

• Single action to make your form reactive.
• Use HTML5 native elements to create your form. (Only the name attribute is necessary).
• Provides stores and helper functions to handle more complex use cases.
• No assumptions on your validation strategy. Use any validation library you want or write your own strategy.
• Handles addition and removal of form controls during runtime.
• Official solutions for error reporting using reporter packages.
• Well tested. Currently at 99% code coverage and constantly working on improving test quality.
• Supports validation with yup, zod and superstruct.
• Easily extend its functionality.

Simple usage example

  <input name="email">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

// inside some .mjs/.js file
import { createForm } from '@felte/vanilla';

const { form } = createForm({
  onSubmit: (values) => console.log(values);
});

form(document.getElementById('signin-form'));

Installation

npm install --save @felte/vanilla

# Or, if you use yarn

yarn add @felte/vanilla

Usage

This package is not meant for users as of now. But it can be used as a better starter point to build integrations with other frameworks that do not have their own compatible reactive stores. It's API is the same as the felte package without its lifecycle management. Also, unlike other integrations, stores won't get synchronized until you call form with your <form> element. You may use felte's documentation as a reference for the most part and just replace any imports of felte for @felte/vanilla.

Since this package does not attach to any lifecycle hooks, you'll need to handle it manually by calling destroy when your form gets unmounted:

const { form } = createForm({ /* ... */ });

const { destroy } = form(document.getElementById('signin-form'));

// Call `destroy` when unmounting the form:
destroy();
```</form>