Felte: A form library for Svelte and Solid
Felte is a simple to use form library for Svelte and Solid. No Field or Form components are needed, just plain stores and actions to build your form however you like. You can see it in action in this CodeSandbox demo!
STATUS: Useable. Felte's API is stable enough to be used. I feel the main API is solid enough to not need breaking changes that fast, but more usage input would be useful. Reporter packages migh have breaking changes more often. If you're interested please give it a try and feel free to open an issue if there's anything missing! We would still recommend pinning the version of Felte or any of its packages and checking the changelogs whenever you want to upgrade.
Features
- Single action to make your form reactive.
- Use HTML5 native elements to create your form. (Only the
nameattribute 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
reporterpackages. - 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
<script>
import { createForm } from 'felte'
const { form } = createForm({
onSubmit: async (values) => {
/* call to an api */
},
})
</script>
<form use:form>
<input type=text name=email>
<input type=password name=password>
<input type=submit value="Sign in">
</form>Packages
This repository is a mono-repo containing multiple packages located in the packages directory. Maintained using pnpm and Changesets.
Core
felte
This is the core package that contains all the basic functionality you need to handle your forms in Svelte. Felte optionally allows you to use error reporters (see them as plugins) to prevent you from needing to find a way to display your errors on your form manually. For this we provide already some reporter packages contained in this same repo.
@felte/solid
This is the core package that contains all the basic functionality you need to handle your forms in Solid. Same as felte but specifically made for Solid.
@felte/common
Common utilities that can be used for any felte package.
Validators
@felte/validator-yup
A utility package to help you validate your form with Yup.
@felte/validator-zod
A utility package to help you validate your form with Zod.
@felte/validator-superstruct
A utility package to help you validate your form with Superstruct.
Reporters
@felte/reporter-tippy
A reporter that uses Tippy.js to display your validation messages without needing any extra work.
@felte/reporter-cvapi
A reporter that uses the browser's constraint validation API to display your validation messages.
@felte/reporter-dom
A reporter that displays the error messages in the DOM, either as a single element or a list of elements.
@felte/reporter-svelte
A reporter that uses a Svelte component to pass the validation messages for you to display.
@felte/reporter-solid
A reporter that uses a Solid component to pass the validation messages for you to display.
Extras
@felte/multi-step
A package to help you handle multi step forms.
Contributing
If you want to contribute to this project you may check CONTRIBUTING.md for instructions on how to contribute.
Contributors β¨
Thanks goes to these wonderful people (emoji key):
 Pablo Berganza π» π π€ π§ |
 Abhijit Kar γ π π€ |
 Hugo MaestΓ‘ π» π€ |
 websocket98765 π |
 avimar π |
 Umang Galaiya π» π |
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT