Skip to main content

informel

informel is a Web Component that wraps your native HTML forms and gives them super powers.


Features:

✅  Easily obtain form values
✅  Automatically show validation errors
✅  Native & custom validation rules
✅  Supports zod schemas
✅  Easily track form validity state
✅  Keep track of whether your form is dirty or not
✅  Support for nested fields (objects, arrays...) ✅  Auto submission via AJAX call, using action and method attributes

Also:
✅ Lightweight: ~20kb
✅ Zero dependency
✅ Relies on the platform: informel doesn't reimplement forms, it leverages native form features to enhance them.

informel is a headless library: all the styling belongs to you!

 Follow on Twitter for updates!

Installation​

CDN Installation​

Add the following script to your HTML page

<script src="https://unpkg.com/informel"></script>

You can then start using <inform-el /> and <inform-field /> elements anywhere in your HTML!.

NPM/Yarn Installation​

Install the package:

npm i informel
yarn add informel

Then import informel at the root level of your app:

import 'informel';

You can then start using <inform-el /> and <inform-field /> elements anywhere in your HTML!.

Usage​

Basic Usage​

Just wrap your native form in <inform-el />:

<inform-el>
    <form>
        <label>
            First Name
            <input type="text" name="firstName" />
        </label>
        <label>
            Last Name
            <input type="text" name="lastName" />
        </label>
        <button type="submit">Submit</button>
    </form>
</inform-el>
Don't forget the <form> element!

<inform-el> heavily relies on native Forms features!

Then you can listen to the inform-submit event on <inform-el> which gives you the form values:

document.querySelector('inform-el').addEventListener('inform-submit', ({ detail: { values } }) => {
    console.log('Submitted:', values);
});

Showing validation errors​

In order to automatically show validation errors, wrap your form controls in <inform-field />.

<inform-el>
    <form>
        <label>
            First Name
            <inform-field>
                <input type="text" name="firstName" required />
            </inform-field>
        </label>
        <label>
            Last Name
            <inform-field>
                <input type="text" name="lastName" required minlength="2" />
            </inform-field>
        </label>
        <button type="submit">Submit</button>
    </form>
</inform-el>

Try submitting the empty form below to see the errors:

informel leverages native form validation features and displays native validation messages by default.

Here is a more elaborated example that showcases some of informel features:

You are still in full control of the styling and layout of your forms.

On top of that, informel accepts custom validation rules, as well as custom error messages. For more information, see validation rules & error messages.