@svelteschool/svelte-forms

A no-fuss Svelte form component that just works.

- Plug'n'Play. Input elements in, values out.
- Works just like a normal form. Except it does all the tedious work for you.
- Extendable. Work with most inputs and custom input components out of the box.
- Two-Way Binding. Svelte-forms is two-way bound by default. Change a value in your object, and it changes in your inputs.
- ~~A toolbox of actions to apply to your elements: Validate, FocusOnSelect, Numbers, TextareaAutoRezie, and many more.~~ (Soon!)

Try it out on the Svelte REPL!

Usage

Simply bind to the components values property:

Using built-in HTML input elements:
``html



placeholder="Enter first name..."
type="text"
name="firstName" />
placeholder="Enter last name..."
type="text"
name="lastName" />



`

Here's how the values object would be structured in the above case:

`js
{
firstName: 'Svelte',
lastName: 'School'
}
`

Inputs that do not have a name property or are disabled will not show up in the object.

__File inputs are not supported.__

Props

prop name | type | default
---------------------|---------------------------|-------------------------
actions | [[action, actionProp]] | []

$3


The actions prop takes an array of [action, options]. The action is applied to the form element using the options just like it would be if you manually applied it to an element: use:action={options}.

Installing

Simple. Install it using yarn or npm.
`
yarn add @svelteschool/svelte-forms

npm install @svelteschool/svelte-forms
`

If you're using Sapper, make sure to install it as a dev dependency:
`
yarn add -D @svelteschool/svelte-forms
`

Running the tests

Run tests by running the test script:
`
yarn test
``

Contribute

If you are interested in contributing you are welcome to open PRs. Please make sure all tests pass and if you add functionality, add your own tests.

Authors

* Svelte School - Svelte School
* Kevin Åberg Kultalahti - kevmodrome

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

* Inspired by lukeed and his formee library.