@svelteschool/svelte-forms

A simple form component that doesn't care about what you put in it. It just works.

Showing:

Popularity

Downloads/wk

106

GitHub Stars

122

Maintenance

Last Commit

1yr ago

Contributors

9

Package

Dependencies

0

Size (min+gzip)

2.0KB

License

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

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

prop nametypedefault
actions[[action, actionProp]][]

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

License

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

Acknowledgments

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial