felte

An extensible form library for Svelte, Solid and React

1,012

View on GitHub View on NPM

Top Related Projects

formik

33,863

Build forms in React, without the tears 😭

react-hook-form

41,010

📋 React Hooks for form state management and validation (Web + React Native)

react-final-form

7,380

🏁 High performance subscription-based form state management for React

unform

4,460

Performance-focused API for React forms 🚀

form

3,724

🤖 Powerful and type-safe form state management for the web. TS/JS, React Form, Solid Form, Lit Form and Vue Form.

Quick Overview

Felte is a form management library for Svelte applications. It provides a simple and flexible API for handling form state, validation, and submission, with minimal boilerplate code. Felte is designed to work seamlessly with Svelte's reactivity system and can be easily integrated into existing projects.

Pros

Lightweight and performant, with minimal overhead
Supports multiple validation libraries (Yup, Zod, Superstruct)
Extensible through a plugin system
Provides built-in accessibility features

Cons

Limited to Svelte applications
Learning curve for developers new to form management libraries
Documentation could be more comprehensive for advanced use cases

Code Examples

Basic form setup:

import { createForm } from 'felte';

const { form } = createForm({
  onSubmit: (values) => {
    // Handle form submission
    console.log(values);
  },
});

Form with validation using Yup:

import { createForm } from 'felte';
import { validator } from '@felte/validator-yup';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().email().required(),
  password: yup.string().min(8).required(),
});

const { form } = createForm({
  validate: validator({ schema }),
  onSubmit: (values) => {
    // Handle form submission
  },
});

Using touch validation:

import { createForm } from 'felte';
import { reporter } from '@felte/reporter-svelte';

const { form } = createForm({
  onSubmit: (values) => {
    // Handle form submission
  },
  extend: [reporter],
  validateOnBlur: true,
});

Getting Started

To start using Felte in your Svelte project:

Install Felte:
```
npm install felte
```

Import and use in your Svelte component:

<script>
import { createForm } from 'felte';

const { form } = createForm({
  onSubmit: (values) => {
    // Handle form submission
  },
});
</script>

<form use:form>
  <input name="email" type="email" />
  <input name="password" type="password" />
  <button type="submit">Submit</button>
</form>

This basic setup creates a form with email and password fields. Felte will handle form state management and submission automatically.

Competitor Comparisons

formik

33,863

Build forms in React, without the tears 😭

Pros of Formik

Larger community and ecosystem, with more resources and third-party integrations
Built-in support for Yup schema validation
More comprehensive documentation and examples

Cons of Formik

Heavier bundle size compared to Felte
More opinionated approach, which may limit flexibility in some cases
Steeper learning curve for beginners

Code Comparison

Formik:

import { Formik, Form, Field } from 'formik';

<Formik initialValues={{ email: '' }} onSubmit={handleSubmit}>
  <Form>
    <Field name="email" type="email" />
    <button type="submit">Submit</button>
  </Form>
</Formik>

Felte:

import { createForm } from '@felte/react';

const { form } = createForm({
  onSubmit: handleSubmit,
});

<form ref={form}>
  <input name="email" type="email" />
  <button type="submit">Submit</button>
</form>

Key Differences

Felte is more lightweight and flexible, allowing for easier integration with various UI libraries
Formik provides a more structured approach with built-in components like Field and Form
Felte uses a ref-based approach, while Formik relies on wrapping components
Formik has better TypeScript support out of the box
Felte offers easier server-side rendering capabilities

react-hook-form

41,010

📋 React Hooks for form state management and validation (Web + React Native)

Pros of react-hook-form

More mature and widely adopted in the React ecosystem
Extensive documentation and community support
Performance-focused with minimal re-renders

Cons of react-hook-form

Limited to React applications only
Steeper learning curve for complex form scenarios
Less flexibility for custom validation logic

Code Comparison

react-hook-form:

import { useForm } from "react-hook-form";

const { register, handleSubmit } = useForm();
const onSubmit = data => console.log(data);

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("firstName")} />
  <input type="submit" />
</form>

felte:

import { useForm } from '@felte/react';

const { form } = useForm({
  onSubmit: values => console.log(values)
});

<form ref={form}>
  <input name="firstName" />
  <input type="submit" />
</form>

Key Differences

felte is framework-agnostic and supports multiple UI libraries
react-hook-form uses a more explicit registration process for form fields
felte relies on HTML attributes for field names, while react-hook-form uses the register function
react-hook-form offers more fine-grained control over form behavior
felte provides a simpler API for basic form handling scenarios

Both libraries aim to simplify form management in web applications, but they cater to different use cases and developer preferences. The choice between them depends on the specific project requirements and the desired level of control over form behavior.

react-final-form

7,380

🏁 High performance subscription-based form state management for React

Pros of react-final-form

More mature and widely adopted in the React ecosystem
Extensive documentation and community support
Field-level validation and error handling

Cons of react-final-form

Larger bundle size due to additional features
Steeper learning curve for complex form scenarios
Requires more boilerplate code for basic forms

Code Comparison

react-final-form:

import { Form, Field } from 'react-final-form'

<Form
  onSubmit={onSubmit}
  render={({ handleSubmit }) => (
    <form onSubmit={handleSubmit}>
      <Field name="firstName" component="input" />
      <button type="submit">Submit</button>
    </form>
  )}
/>

felte:

import { useForm } from '@felte/react'

const { form } = useForm({
  onSubmit: (values) => {
    // Handle form submission
  }
})

<form ref={form}>
  <input name="firstName" />
  <button type="submit">Submit</button>
</form>

Summary

react-final-form is a more established solution with extensive features and community support, making it suitable for complex form scenarios. However, it comes with a larger bundle size and steeper learning curve. felte offers a simpler API and smaller bundle size, making it ideal for basic to moderate form requirements. The choice between the two depends on the specific needs of your project and the complexity of your forms.

unform

4,460

Performance-focused API for React forms 🚀

Pros of Unform

More comprehensive documentation and examples
Larger community and ecosystem support
Built-in integration with popular UI libraries like React Native

Cons of Unform

Heavier bundle size
Steeper learning curve for beginners
Limited to React and React Native environments

Code Comparison

Unform:

import { Form } from '@unform/web';
import Input from './components/Input';

function MyForm() {
  function handleSubmit(data) {
    console.log(data);
  }

  return (
    <Form onSubmit={handleSubmit}>
      <Input name="email" />
      <Input name="password" type="password" />
      <button type="submit">Submit</button>
    </Form>
  );
}

Felte:

<script>
  import { createForm } from 'felte';

  const { form } = createForm({
    onSubmit: (values) => {
      console.log(values);
    },
  });
</script>

<form use:form>
  <input name="email" />
  <input name="password" type="password" />
  <button type="submit">Submit</button>
</form>

Both libraries aim to simplify form handling, but Unform is more React-centric and feature-rich, while Felte is lighter and framework-agnostic, with a focus on Svelte integration. Unform offers more out-of-the-box features and integrations, but Felte provides a simpler API and smaller bundle size, making it potentially more suitable for smaller projects or those prioritizing performance.

form

3,724

🤖 Powerful and type-safe form state management for the web. TS/JS, React Form, Solid Form, Lit Form and Vue Form.

Pros of TanStack Form

More comprehensive and feature-rich, offering advanced form management capabilities
Better TypeScript support with strong type inference
Larger community and ecosystem, potentially leading to more resources and third-party integrations

Cons of TanStack Form

Steeper learning curve due to its more complex API and concepts
Larger bundle size, which may impact performance in smaller projects
Potentially overkill for simple form scenarios, where a lighter solution like Felte might suffice

Code Comparison

Felte:

import { createForm } from '@felte/core';

const { form } = createForm({
  onSubmit: (values) => {
    // Handle form submission
  },
});

TanStack Form:

import { useForm } from '@tanstack/react-form';

const form = useForm({
  defaultValues: { /* ... */ },
  onSubmit: async (values) => {
    // Handle form submission
  },
});

Both libraries provide a straightforward way to create forms, but TanStack Form offers more configuration options and a React-specific hook, while Felte's API is more framework-agnostic.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Felte: A form library for Svelte, Solid and React

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!

Features

Single action to make your form reactive.
Use HTML5 native elements to create your form. (Only the name attribute 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 reporter packages.
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.

Simple usage example

Svelte

<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>

Solid

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>
  );
}

React/Preact

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>
  );
}

Vue

<script setup>
  import { useForm } from '@felte/vue';

  const { vForm } = useForm({
    onSubmit: async (values) => {
      /* call to an api */
    },
  });
</script>
<template>
  <form v-form>
    <input type="text" name="email" />
    <input type="password" name="password" />
    <button type="submit">Sign In</button>
  </form>
</template>

VanillaJS with Web Components

<script type="module">
  import 'https://unpkg.com/@felte/element@0.4.0/dist/min/felte-form.js';
  const felteForm = document.querySelector('felte-form');

  felteForm.configuration = {
    onSubmit: async (values) => {
      console.log(values);
    },
  };
</script>

<felte-form>
  <form>
    <input type="text" name="email" />
    <input type="password" name="password" />
    <button type="submit">Sign In</button>
  </form>
</felte-form>

This example works without a bundler! Copy its contents to an HTML file and open it on your browser. A more complete example like this, with validation and error reporting, can be found here.

More examples

You can find fully functional examples on the /examples directory of this repository. You should be able to open them on CodeSandbox by replacing github's url to githubbox. E.g. Replace https://github.com/pablo-abc/felte/tree/main/examples/svelte/basic with https://githubbox.com/pablo-abc/felte/tree/main/examples/svelte/basic.

Packages

This repository is a mono-repo containing multiple packages located in the packages directory. Maintained using pnpm and Changesets.

Svelte

We provide two packages that are specific to Svelte:

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/reporter-svelte

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.

Solid

We provide two packages that are specific to Solid:

@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/reporter-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.

React

We provide two packages that are specific to React:

@felte/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.

@felte/reporter-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.

Preact

We provide two packages that are specific to Preact:

@felte/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.

@felte/reporter-preact

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.

Vue

We provide (experimental) support for Vue with the following package:

@felte/vue

This is package contains the basic functionality you need to handle your forms in Vue. Same as felte but specifically made for Vue. The API is similar to that of felte but using a custom directive to register your form and returning "accessors" (similar to the react/preact/solid packages) that resolve into reactive refs.

There's no documentation for this right now so use at your own risk.

VanillaJS

We provide three packages that can be used with only VanillaJS. Two of them using Web Components. These elements do not use the shadow DOM since there is no reason to isolate styles.

@felte/element

This is the main package that contains the basic functionality you need to handle your forms in vanilla JS using a custom element. Similar to felte but specifically made to be used as a custom element. This is the recommended way to handle your forms when using Vanilla JS. Web components are well supported by all major browsers so this should be a safe option unless you need to support legacy browsers.

@felte/reporter-element

A reporter packages that uses a custom element to display validation messages on the DOM. This the recommended way to display your validation messages when using vanilla JS.

@felte/vanilla

This is the main package that contains the basic functionality you need to handle your forms in vanilla JS. Similar to felte and other integrations but with all code related to frameworks removed. This requires a bit more work to use, since you'll be the one in charge of cleaning up subscribers and listeners on it. It's API is basically the same as felte (Svelte's integration) so you can use Svelte's documentation as a reference. This can be used as a starting point to create your own integration/package for other environments. When it comes to vanilla JS we'd recommend using @felte/element using web components.

Validators

The following packages can be used with any of the framework specific felte wrappers:

@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.

@felte/validator-vest

A utility package to help you validate your form with Vest.

Reporters

The following packages can be used with any of the framework specific felte wrappers:

@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.

Contributing

If you want to contribute to this project you may check CONTRIBUTING.md for general guidelines on how to do so.

Contributors â¨

Thanks goes to these wonderful people (emoji key):

_{Pablo Berganza} ð» ð ð¤ ð§ â ï¸	_{Panagiotis Kapros} ð»	_{Benjamin Bender} ð» ð¤ ð	_{Abhijit Kar ã} ð ð¤	_{Hugo MaestÃ¡} ð» ð¤	_{websocket98765} ð	_avimar ð
_{Umang Galaiya} ð» ð	_{Gildas Garcia} ð» ð	_basaran ð» ð	_Evyatar ð»	_{Julian Schurhammer} ð»	_{Koichi Kiyokawa} ð	_{Ryan Christian} ð
_{Ikko Ashimine} ð	_pasqui23 ð»	_{Immanuel Calvin Herchenbach} ð	_dawidmachon ð	_{Emil Celustka} ð»	_{Callum Macdonald} ð	_Jason ð
_{John Winston} ð»	_{Timo Wilhelm} ð»	_jfreyheit ð	_{Urs Honegger} ð	_{Bradley Lewis} ð	_{Julien Tome} ð»	_xvenge00 ð»

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT

Browser support

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.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Formik

Cons of Formik

Code Comparison

Key Differences

Pros of react-hook-form

Cons of react-hook-form

Code Comparison

Key Differences

Pros of react-final-form

Cons of react-final-form

Code Comparison

Summary

Pros of Unform

Cons of Unform

Code Comparison

Pros of TanStack Form

Cons of TanStack Form

Code Comparison

Convert designs to code with AI

README

Felte: A form library for Svelte, Solid and React

Features

Simple usage example

Svelte

Solid

React/Preact

Vue

VanillaJS with Web Components

More examples

Packages

Svelte

Solid

React

Preact

Vue

VanillaJS

Validators

Reporters

Contributing

Contributors â¨

License

Browser support

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days

Contributors â¨