![\"Svelte](\"https://svelte-forms-lib-sapper-docs.tjin.now.sh/logo.png\" "\\"Svelte"){kind=logo}
\n\n \n
![\"npm](\"https://img.shields.io/npm/v/svelte-forms-lib.svg\")
\n\n\n\n ![\"npm](\"https://img.shields.io/npm/dm/svelte-forms-lib.svg\")
\n\n\n ![\"minified](\"https://img.shields.io/bundlephobia/min/svelte-forms-lib.svg\")
\n\n\n ![\"license\"](\"https://img.shields.io/npm/l/svelte-forms-lib.svg\")
\n\n\n\nSvelte forms lib is a lightweight library for managing forms in Svelte, with an Formik like API.\n\n## Documentation\n\nGo to the newly released documentation website to understand the API and see examples.\n\n## Installation\n\nThis module is distributed via npm which is bundled with node and\nshould be installed as one of your project's `dependencies`:\n\n```bash\nnpm install svelte-forms-lib\n```\n\n> This package also depends on `svelte`. Please make sure you have it installed as well.\n\n## Usage\n\n```svelte\n\n\n\n```\n\nThe `createForm` function requires at minimum a `initialValues` object which contains the initial state of the form and a `submit` function which will be called upon submitting the form.\n\n## Observables \n\nBecause the library is built using the Store API in Svelte, the values exposed by `createForm` are observables.\n\n```js\n// all observables returned by `createForm`\nconst { form, errors, touched, isValid, isSubmitting, isValidating, state } = createForm({...})\n```\n\nWithin the template they can be read using the `$` prefix i.e. `$form`, `$errors`. For example to access `isValid` we'll use the `$` prefix in the template\n\n```svelte\nThis form is {$isValid}
\n```\n\nAnother example regarding form or errors:\n\n```svelte\n\n\n\n{#if $errors.name}\n {$errors.name}\n{/if}\n```\n\n> The code example below is abbreviated for focus, `...other` represents the remaining handlers, config and props needed to run the code.\n\nSo make sure to use the `$` prefix in the template for observable values returned by `createForm`.\n\n## Validation\n\n### Using Yup\n\nThis library works best with [yup](https://github.com/jquense/yup) for form validation. \n\n```svelte\n\n\n\n```\n\n### Using custom validator\n\nCustom validation is also possible:\n\n```svelte\n\n\n\n```\n\nCurrently custom validation is only run when submitting the form. Field validation will be added in the near future.\n\n### Using helper components to reduce boilerplate i.e. `Form`, `Field` and `ErrorMessage`\n\nTo reduce the boilerplate it is also possible to use additional helper components i.e. `Form`, `Field` and `ErrorMessage`. Usage can be done as follows:\n\n```svelte\n\n\n