- Features
- Simple usage example
- Packages
- Contributing
- Contributors
Felte is a simple to use form library for Svelte, Solid and React. 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!
- 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, superstruct and vest.
- Easily extend its functionality.
<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>
<button type=submit>Sign In</button>
</form>import { createForm } from '@felte/solid';
function Form() {
const { form } = createForm({
onSubmit: async (values) => {
/* call to an api */
},
})
return (
<form use:form>
<input type="text" name="email" />
<input type="password" name="password" />
<button type="submit">Sign In</button>
</form>
);
}import { useForm } from '@felte/react';
// if using preact, use `@felte/preact`
function Form() {
const { form } = useForm({
onSubmit: async (values) => {
/* call to an api */
},
})
return (
<form ref={form}>
<input type="text" name="email" />
<input type="password" name="password" />
<button type="submit">Sign In</button>
</form>
);
}This repository is a mono-repo containing multiple packages located in the packages directory. Maintained using pnpm and Changesets.
We provide two packages that are specific to Svelte:
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.
A reporter package that uses a Svelte component to pass the validation messages for you to display. This provides an API that might feel the most familiar to most developers.
We provide two packages that are specific to 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.
A reporter package that uses a Solid component to pass the validation messages for you to display. This provides an API that might feel the most familiar to most developers.
We provide two packages that are specific to React:
This is the main package that contains the basic functionality you need to handle your forms in React. Same as felte but specifically made for React.
A reporter packages that uses a React component to pass the validation messages for you to display. This provides an API that might feel the most familiar to most developers.
We provide two packages that are specific to Preact:
This is the main package that contains the basic functionality you need to handle your forms in Preact. Same as felte but specifically made for Preact. The API is the same as @felte/react so you can refer to the same documentation.
A reporter packages that uses a Preact component to pass the validation messages for you to display. This provides an API that might feel the most familiar to most developers. The API is the same as @felte/react so you can refer to the same documentation.
The following packages can be used with any of the framework specific felte wrappers:
A utility package to help you validate your form with Yup.
A utility package to help you validate your form with Zod.
A utility package to help you validate your form with Superstruct.
A utility package to help you validate your form with Vest.
The following packages can be used with any of the framework specific felte wrappers:
A reporter that uses Tippy.js to display your validation messages without needing any extra work.
A reporter that uses the browser's constraint validation API to display your validation messages.
A reporter that displays the error messages in the DOM, either as a single element or a list of elements.
If you want to contribute to this project you may check CONTRIBUTING.md for general guidelines on how to do so.
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT
While further testing would be needed to provide an accurate answer, Felte should work in all evergreen browsers. Polyfills might be needed if you target older browsers such as IE 11 for, at least, Promise.all, Element.closest, URLSearchParams, fetch, CustomEvent and iterators.