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 submit event on <inform-el> which gives you the form values:

document.querySelector('inform-el').addEventListener('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.