Formula is still in active development - as such there may still be API changes
Formula is a library for Svelte with features for creating Zero Configuration reactive forms and fully data-driven applications.
Out-of-the box it's designed to work with HTML5 forms. Using the
name attribute of your HTML elements, Formula builds
a set of state objects using Svelte's subscribable stores, making them available for you subscribe
to in your application. These stores contain values and validation states, which are configured as easily as setting
supported attributes, and doesn't get in the way of things like Accessibility.
Want to make a field required? Just add the
<input required>attribute, or add
<input minlength="8">to set a minimum length on the fields.
Validation is enhanced via custom field and form level validation functions passed in the options - you can also pass default values, or override default HTML5 validation text with your own versions (such as localised text).
You can also enrich you fields with computed values (such as a password strength derived from the users input).
Formula also provides an API for working with collections of data - beaker allows you to use Formula to create rich row-level forms for applications such as data grids.
Formula is available on NPM, with the source available on GitHub. To install in your project type:
npm i svelte-formula
To use in your project all you need is an element container binding the form with
directive, and form input fields with their
name property set.