informel

Framework-agnostic js forms library.

Lightweight ・0 dependency・#usetheplatform

- Automatically shows validation errors
- Supports zod schemas
- ... and more!

[informel @informel_js]

Hello world 🙂

[Julien Delort @Julien_Delort]

Introducing informel, a lightweight framework-agnostic headless forms library: https://t.co/EwbiNC8mdi.

Main features 👇 (Using React? Check out the last tweet).

#forms #formlibrary #javascript #react #webcomponents #FrontEnd

[informel @informel_js]

Informel validation strategy:

https://t.co/9s2Jfmkv09

First validation on blur, then validate corrections as the user types.

[informel @informel_js]

This is how informel works!

https://t.co/JVtcMfZ8fr

[Ben Holmes @BHolmesDev]

@jamesqquick Absolutely! Best default is:
- validate on-blur for the first pass (no distractions)
- if there's an error, validate on-input (instant feedback as you correct)

[informel @informel_js]

Need to validate an email field? Just use <input type="email" />.
An url field? Use <input type="url" />.

The value will be automatically validated as being a valid email or url.

No need to come with your own regexes.

[informel @informel_js]

Some good reminders about HTML5 built-in form validation features.

https://t.co/fpEKAuzOBK

Informel relies on those (checkValidity(), setCustomValidity() etc...) and augments them in order to show errors when it's appropriate.

https://t.co/lEXFcuZT8J

[informel @informel_js]

@renatoribz 👀

https://t.co/iU7Y4gSrAp

[Julien Delort @Julien_Delort]

Introducing informel, a lightweight framework-agnostic headless forms library: https://t.co/EwbiNC8mdi.

Main features 👇 (Using React? Check out the last tweet).

#forms #formlibrary #javascript #react #webcomponents #FrontEnd

[informel @informel_js]

@stevekrouse @ValDotTown Couple that with informel, which adds front end validation, automatically sends form data as ajax and works with vanilla html forms and it's 🤌

https://t.co/I29peRh7sx

https://t.co/iU7Y4gSrAp

[Julien Delort @Julien_Delort]

Introducing informel, a lightweight framework-agnostic headless forms library: https://t.co/EwbiNC8mdi.

Main features 👇 (Using React? Check out the last tweet).

#forms #formlibrary #javascript #react #webcomponents #FrontEnd

[informel @informel_js]

@laurieontech Suggesting informel 👀

It's framework agnostic: works in React but also in any other framework or vanilla js.

No need to look for a new forms library if you change your stack!

https://t.co/iU7Y4gSrAp

[Julien Delort @Julien_Delort]

Introducing informel, a lightweight framework-agnostic headless forms library: https://t.co/EwbiNC8mdi.

Main features 👇 (Using React? Check out the last tweet).

#forms #formlibrary #javascript #react #webcomponents #FrontEnd

[informel @informel_js]

@hk_Vancouver @SalOrozco23 Easy way to add validation 👀: https://t.co/aTEK4dJGm7

[informel @informel_js]

informel tip #6

You don't need much to add validation to your forms:
- Wrap the <form> element with <inform-el>
- And wrap your fields with <inform-fields>

And that's it! Validation errors will be shown!

informel doesn't change your forms, it just enhances them!

@reactjs👇

[informel @informel_js]

@kentcdodds @nickemccurdy Suggesting informel as well 👀

It's framework agnostic: works in React but also in any other framework or vanilla js.

No need to look for a new forms library if you change your stack!

https://t.co/iU7Y4gSrAp

[Julien Delort @Julien_Delort]

Introducing informel, a lightweight framework-agnostic headless forms library: https://t.co/EwbiNC8mdi.

Main features 👇 (Using React? Check out the last tweet).

#forms #formlibrary #javascript #react #webcomponents #FrontEnd

[informel @informel_js]

@DavidKPiano This is what informel relies on under the hood and it was created to enhance it. For example, getting form values that way doesn't work well with checkboxes. Or required fields are marked invalid on load before any interaction.

Informel makes those features what they should be.

[informel @informel_js]

@jacobmparis This is what informel uses under the hood for custom validation 👀

https://t.co/ybtOU4hWvQ

#usetheplatform

[informel @informel_js]

Form libraries should make things simpler but still leave you in control. They shouldn't take your <input> away from you in favor of some custom <Input/> component.

#usetheplatform

[informel @informel_js]

@asidorenko_ 💯. informel was built with that simplicity in mind. That form remains the same, just wrapped within <InformEl>, which brings more features: custom errors, getting the values, dirty state etc...

[informel @informel_js]

@asidorenko_ This works... until you have a checkbox 🙂. You'll have to handle the specificity of different element types and repeat this logic for every form.

With informel you can just wrap the form with <InformEl> and listen to onInformSubmit. You'll get the values directly as an object!

[informel @informel_js]

@feelbettermyluv Ah I see, they do backend validation as well and wire the errors back to the front-end. We only support front-end validation for now. That's a nice implementation, though, we might consider something like this for a future version.

[informel @informel_js]

@philkellr @gommo It works also well with React: https://t.co/ekoCsdDcjo

Tailwind as well, you are still fully in control of the styles, so Tailwind works just as it normally would.

[informel @informel_js]

Same thing for @reactjs use the `<InformEl>` and `<InformField>` component.

Common mistake: don't forget `import "informel"`. It is still needed once at the root of the app for registering the web components.

https://t.co/a1QHaWd46M

[informel @informel_js]

@feelbettermyluv Technically it should work with SSR since the web component just wraps the form and it should kick in during hydration.

We have a specific version in the docs for Remix: https://t.co/VlWWZixWi5

[informel @informel_js]

@philkellr @gommo Informel adds the validation part, and it relies on the native HTML attributes (required, min/max length, pattern etc...) 🙂

https://t.co/aTEK4dJGm7

[informel @informel_js]

informel tip #6

You don't need much to add validation to your forms:
- Wrap the <form> element with <inform-el>
- And wrap your fields with <inform-fields>

And that's it! Validation errors will be shown!

informel doesn't change your forms, it just enhances them!

@reactjs👇

[informel @informel_js]

@mitchellwright Informel supports React 👀

https://t.co/iU7Y4gSrAp

[Julien Delort @Julien_Delort]

Introducing informel, a lightweight framework-agnostic headless forms library: https://t.co/EwbiNC8mdi.

Main features 👇 (Using React? Check out the last tweet).

#forms #formlibrary #javascript #react #webcomponents #FrontEnd

[informel @informel_js]

@Julien_Delort New docs site url! https://t.co/1jiAwP7sLo