After more than a year of work, I am proud to announce the release of version 1.0.0 of Felte!
Felte is an extensible form management library for Svelte, Solid and (as of today) React. The main characteristic of it is that it does not require any sort of Field
or Form
components to work. In its most basic form it only requires you to provide it your HTML form element so it can subscribe to your user’s interaction with your form.
I originally started working on Felte wanting a form library for Svelte that would not make it complex to style my input components. As I worked more on it, it began growing into a much more flexible package that allowed you to validate your form using your preferred validation library and display your validation messages as you preferred. After the release of version 1.0.0 of SolidJS, I released a version for it as well that shares most of its internals with the original Felte package. And now, more than a year after the first commit, version 1.0.0 has been released alongside a new version for React! This includes many improvements in the core API, new features and a more consistent API between all three versions.
Usage
All three versions of Felte have a very similar API, and a similar concept: you call a function to set up your form. Then you give Felte a reference to your HTML form element. The variations in its API come mostly from how each framework handles reactivity. For example, with Svelte, Felte returns stores that contain your data which you can access by prefixing the stores with $
. With Solid and React it returns functions that will let you subscribe to all of your form’s data or specific values of it.
On its most basic form, you only need to use form
, a property returned from Felte that will let it subscribe to all interactions that happen in your form.
Here’s a basic example of how each version looks like:
Svelte
The package for Svelte is available on npm as felte
.
<script>
import { createForm } from 'felte'
const { form } = createForm({
onSubmit: async (values) => {
/* call to an api */
},
})
</script>
<!-- `form` is an action -->
<form use:form>
<input type=text name=email>
<input type=password name=password>
<button type=submit>Sign In</button>
</form>
Solid
The package for Solid is available on npm as @felte/solid
.
import { createForm } from '@felte/solid';
function Form() {
const { form } = createForm({
onSubmit: async (values) => {
/* call to an api */
},
})
// `form` is an action
return (
<form use:form>
<input type="text" name="email" />
<input type="password" name="password" />
<button type="submit">Sign In</button>
</form>
);
}
React
The package for React is available on npm as @felte/react
.
import { useForm } from '@felte/react';
function Form() {
const { form } = useForm({
onSubmit: async (values) => {
/* call to an api */
},
})
// `form` is a ref
return (
<form ref={form}>
<input type="text" name="email" />
<input type="password" name="password" />
<button type="submit">Sign In</button>
</form>
);
}
New features
Version 1 comes with a lot of improvements and features:
- Debounced validation is now supported. Previously we only supported asynchronous validation, but offered no way to debounce them. This meant using Felte’s validation for calls to an API would not be recommended unless you debounced it yourself, or did them only on submission.
- Asynchronous and debounced validations might apply to only a few fields. Showing loaders for the field’s that are validating is a nice feature to have for your users. This is why Felte now offer’s a way to check if validations are currently running via the new
isValidating
store. And a way to check which is the last field your users interact with using the newinteracted
store. - Using custom form controls was not so straightforward. Requiring to use helper functions to update your stores. Felte now exports a new function:
createField
(useField
for React) to be used with custom fields where you can’t directly provide aname
, or with fields that don’t use native HTML controls at all (such as acontenteditable
elements). It helps you make your custom fields “discoverable” to Felte. - Better support for field arrays with new helper functions to handle them:
addField
,unsetField
,moveField
andswapFields
. - You no longer always need to have an
onSubmit
handler. If noonSubmit
is declared, Felte will submit your values as eitherapplication/x-www-form-urlencoded
ormultipart/form-data
using theaction
,method
andenctype
attributes of your<form>
element.
Breaking changes
This being a major version release, there are some breaking changes. If you were previously using Felte v0.x, you can check the migration guide for Svelte, or the migration guide for Solid.
Read more
I’ve gone back to update my original introductory posts about Felte, as well as added a new one about React to the series. You can check them out here:
- Felte: an extensible form library for Svelte
- Felte: an extensible form library for Solid
- Felte: an extensible form library for React
Final words
I’ve put a lot of work on this project, and I’m really grateful to the contributors that helped Felte grow as much as it did! I hope that this release can be useful to all of you!
Top comments (3)
I'm still trying to figure out what exactly Felte is (after recently digging in a bit to Vest which Felte docs say can be used)? I see here the svelte action and react hook...is it basically a higher order function that wraps your form? Could I use it with my own AgnosticUI (which wants total control of the UI primitives)? I've done a demo with Vest and my do Yup, but wonder if I should/can do an AgnosticUI one with Felte.
I wouldn't call it a "higher order function". The reason for the svelte action/react hook is that it needs a reference to your
<form>
element (the native HTMLFormElement). As long as the component library you use lets you have access to it, you can use Felte with it. I'm not sure if this answers your questions, though!👍 Yes it definitely answers -- thanks Pablo!