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:

<script>
  import Form from "@svelteschool/svelte-forms";
  let values;
</script>

<Form bind:values>
  <input
    placeholder="Enter first name..."
    type="text"
    name="firstName" />
  <input
    placeholder="Enter last name..."
    type="text"
    name="lastName" />
</Form>

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

{
  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

actions

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

Validation

Handling form validation is pretty straight forward in Svelte using this library, you'd pick your preferred validation library (Yup for example) and just do a reactive statement like so: $: validity = validateForm(values) where validateForm is a function that does just that.

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.