@felte/element

Felte: A form library for vanilla JS (custom element)

Felte is an extensible form library originally bult for Svelte. This package aims to provide Felte's functionality using a custom element. Felte, on its most simple form, only requires you to provide a <form> element to it in order to work.

WARNING: This package is under development, things might break on updates and documentation is almost non-existent besides this README.

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

Using Svelte as an example:

<script type="module">
  import { prepareForm } from '@felte/element';

  // Needs to run _before_ `<felte-form>` connects.
  // Make sure to call it at the top leve of the module.
  prepareForm('signin', {
    onSubmit: async (values) => {
      /* call to an api */
    },
  });
</script>

<felte-form id="signin">
  <form>
    <input type="text" name="email" />
    <input type="password" name="password" />
    <input type="submit" value="Sign in" />
  </form>
</felte-form>

Installation

npm install --save @felte/element

# Or if you use yarn

yarn add @felte/element

Usage

To learn more about how to use felte to handle your forms, check the official documentation.

Framework compatibility

This package should work nicely with any framework. Specially if you're using the prepareForm method of creating your form. It also works really nice with frameworks that set attributes as properties or frameworks that provide syntax to set values to properties of elements instead of attributes.