Felte Documentation

Felte is a simple and extensible form library designed for Svelte. Unlike many other form libraries, Felte does not force you to use specific components like <Form> or <Field>. This allows you to maintain full control over your HTML structure and styling while Felte handles the form reactivity.

Key capabilities include:

• Unobtrusive Reactivity: Manage form state without component wrappers.
• Extensibility: Easily add custom logic for common form requirements such as validation and error reporting (via reporters).

Felte is a simple and extensible form library designed for Svelte, Solid, React, Preact, Vue, and VanillaJS.

Its primary goal is to manage form reactivity with minimal friction. Unlike many other form libraries, Felte does not force you to use specific UI components like <Form> or <Field>. This allows you to maintain full control over your styling and HTML structure while Felte handles the underlying state and reactivity.

Key capabilities include:

• Unobtrusive Reactivity: Manage form state without component constraints.
• Extensibility: Easily add functionality for common form requirements such as validation and error reporting (reporters).

Felte is a lightweight, reactive form library designed for Svelte, Solid, React, Preact, Vue, and VanillaJS. Unlike many form libraries, it does not require specific Field or Form components; instead, it uses plain stores and actions to make your existing HTML5 native elements reactive.

Key features include:

• Minimal Setup: Use standard HTML elements with only the name attribute required.
• Framework Agnostic Validation: Works with any validation strategy or library (e.g., Zod, Yup, Superstruct, Vest).
• Runtime Flexibility: Handles the addition and removal of form controls during runtime.
• Extensibility: Official reporter packages are available for error reporting, and the core can be easily extended.

Felte is an extensible form library for React that focuses on performance and simplicity.

Key characteristics:

• Minimal Re-renders: No re-renders occur unless you explicitly need to access a specific field's value within your component.
• Native HTML: Uses standard HTML5 elements; only the name attribute is necessary.
• Extensible Validation: No assumptions on validation strategy; supports libraries like yup, zod, and superstruct.
• Dynamic Controls: Handles the addition and removal of form controls during runtime.
• Unopinionated UI: Does not require custom components, making it easy to apply custom styles.

The @felte/element package provides several capabilities for form management:

• Reactivity: A single action makes your form reactive.
• Native HTML5: Uses standard HTML elements; only the name attribute is required for field mapping.
• Dynamic Controls: Handles the addition and removal of form controls during runtime.
• Validation Agnostic: Works with any validation strategy, including official support for yup, zod, and superstruct.
• Extensibility: Provides stores, helper functions, and official reporter packages for error reporting.

Felte provides a lightweight and extensible way to manage forms in Preact with the following characteristics:

• Minimal Re-renders: No re-renders occur unless you explicitly need to access a specific field's value within your component.
• Native HTML Integration: Uses standard HTML5 elements; only the name attribute is required for inputs.
• Validation Agnostic: Works with any validation strategy or library, including yup, zod, and superstruct.
• Dynamic Controls: Handles the addition and removal of form controls during runtime.
• Extensibility: Can be extended via helper functions, stores, and official reporter packages for error reporting.

Felte relies on specific DOM events to detect changes. If your custom control wraps a native input element, ensure it dispatches the appropriate event:

• change event: Required for <input type="checkbox">, <input type="radio">, <select>, and <input type="file">.
• input event: Required for all other types of <input> elements.

If your custom component does not automatically dispatch these, you must manually dispatch them from the component to ensure Felte detects the value changes.

Felte automatically listens for specific events to update field values based on the element type:

• change events: Listened to for <input type="checkbox">, <input type="radio">, <select>, and <input type="file">.
• input events: Listened to for all other types of <input> elements.

If your custom control wraps a native input, ensure it dispatches these standard events to allow Felte to handle the updates automatically without calling setField manually.

You can define complex, nested data shapes in Felte by using dot notation in the name attribute of your input elements (e.g., "account.email"). Felte will automatically transform these names into a nested object structure in the form's data store.

For example, using names like account.email and profile.firstName will result in a data object structured as:

{
  account: {
    email: '',
    password: '',
  },
  profile: {
    firstName: '',
    lastName: '',
  },
}

<form use:form>
  <input name="account.email" type="email">
  <input name="account.password" type="password">
  <input name="profile.firstName">
  <input name="profile.lastName">
</form>

Felte provides official validators which act as adapters for popular third-party validation libraries (like Yup, Zod, Superstruct, and Vest).

These adapters bridge the gap between the external library's output format and Felte's internal requirements. Instead of manually transforming validation errors, you use an adapter via the extend property in the createForm configuration. This allows you to use your preferred schema declaration syntax while benefiting from Felte's form management.