Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mdauner/sveltejs-forms
Declarative forms for Svelte
https://github.com/mdauner/sveltejs-forms
form form-validation hacktoberfest svelte svelte-components svelte3 sveltejs yup
Last synced: 2 months ago
JSON representation
Declarative forms for Svelte
- Host: GitHub
- URL: https://github.com/mdauner/sveltejs-forms
- Owner: mdauner
- License: mit
- Created: 2019-09-25T13:41:24.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-08T15:40:59.000Z (over 1 year ago)
- Last Synced: 2024-09-29T11:55:36.501Z (2 months ago)
- Topics: form, form-validation, hacktoberfest, svelte, svelte-components, svelte3, sveltejs, yup
- Language: JavaScript
- Homepage: https://mdauner.github.io/sveltejs-forms/
- Size: 2.51 MB
- Stars: 196
- Watchers: 6
- Forks: 17
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - SvelteJs Forms - Gerenciador de formulários. (UI Componentes / Comunidade Global)
- awesome-starred - mdauner/sveltejs-forms - Declarative forms for Svelte (svelte)
README
# sveltejs-forms
[](https://codecov.io/gh/mdauner/sveltejs-forms)
Declarative forms for [Svelte](https://svelte.dev/).
[DEMO](https://svelte.dev/repl/8e7deaa261364b4f8b2c0caff1982eeb?version=3.23.0)
## Features
- optional schema-based validation through [Yup](https://github.com/jquense/yup)
- access to nested properties using paths
- supports custom components
- provides `Input`, `Select`, `Choice` components to reduce boilerplate
## Install
```shell
$ npm i sveltejs-forms
```
or
```shell
$ yarn add sveltejs-forms
```
## How to use
### With provided `Input`, `Select`, `Choice` helper components
```html
import { Form, Input, Select, Choice } from 'sveltejs-forms';
import yup from '[email protected]';
function handleSubmit({ detail: { values, setSubmitting, resetForm } }) {
setTimeout(() => {
console.log(values);
setSubmitting(false);
resetForm({
user: { email: '[email protected]' }, // optional
});
}, 2000);
/**
* {
* user: {
* email: '[email protected]'
* },
* password: '123456',
* language: 'svelte',
* os: 'osx,linux'
* }
*/
}
function handleReset() {
console.log('form has been reset');
}
const schema = yup.object().shape({
user: yup.object().shape({
email: yup
.string()
.required()
.email(),
}),
password: yup.string().min(4),
language: yup.string().required(),
os: yup.string(),
});
const langOptions = [
{ id: 'svelte', title: 'Svelte' },
{ id: 'react', title: 'React' },
{ id: 'angular', title: 'Angular' },
];
const osOptions = [
{ id: 'macos', title: 'macOS' },
{ id: 'linux', title: 'Linux 🐧' },
{ id: 'windows', title: 'Windows' },
];
const initialValues = {
language: 'svelte',
};
:global(.sveltejs-forms) {
background-color: #f8f8f8;
display: inline-block;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 5px;
}
:global(label) {
font-size: 0.8rem;
color: #888;
margin-bottom: 0.2rem;
}
:global(.message) {
font-size: 0.8rem;
color: #888;
margin: 0.2rem 0;
color: #f56565;
}
:global(input[type='text']),
:global(textarea),
:global(select) {
width: 100%;
background-color: white;
margin: 0;
}
:global(input[type='checkbox'] + label) {
display: inline-block;
margin-right: 2rem;
}
:global(.field) {
margin-bottom: 1rem;
}
button {
border-radius: 5px;
padding: 0.5rem 1rem;
margin-right: 1rem;
color: white;
}
button[type='reset'] {
background-color: #f56565;
}
button[type='submit'] {
background-color: #48bb78;
width: 80px;
}
{initialValues}
validateOnBlur={false}
validateOnChange={false}
on:submit={handleSubmit}
on:reset={handleReset}
let:isSubmitting
let:isValid
>
label="Email Address"
value="[email protected]"
placeholder="e.g. [email protected]" />
Reset
Sign in
The form is valid: {isValid}
```
### With custom component:
```html
import { Form } from 'sveltejs-forms';
import Select from 'svelte-select';
import yup from '[email protected]';
let svelteSelect;
function handleSubmit({ detail: { values, setSubmitting, resetForm } }) {
setTimeout(() => {
console.log(values);
setSubmitting(false);
svelteSelect.handleClear();
resetForm();
}, 2000);
}
const schema = yup.object().shape({
food: yup.string().required()
});
let items = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'pizza', label: 'Pizza' },
{ value: 'cake', label: 'Cake' },
{ value: 'chips', label: 'Chips' },
{ value: 'ice-cream', label: 'Ice Cream' },
];
Submit
```
## Slot props
| Name | Type |
|------|------|
| isSubmitting | `boolean`
| isValid | `boolean`
| setValue(path, value) | `function`
| touchField(path) | `function`
| validate() | `function`
| values | `object`
| errors | `object`
| touched | `object`
## Contributions
**All contributions are welcome.**