{"id":13553480,"url":"https://github.com/mdauner/sveltejs-forms","last_synced_at":"2025-04-05T13:08:00.514Z","repository":{"id":35132901,"uuid":"210855039","full_name":"mdauner/sveltejs-forms","owner":"mdauner","description":"Declarative forms for Svelte","archived":false,"fork":false,"pushed_at":"2023-04-08T15:40:59.000Z","size":2630,"stargazers_count":197,"open_issues_count":34,"forks_count":17,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T12:11:20.815Z","etag":null,"topics":["form","form-validation","hacktoberfest","svelte","svelte-components","svelte3","sveltejs","yup"],"latest_commit_sha":null,"homepage":"https://mdauner.github.io/sveltejs-forms/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdauner.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-25T13:41:24.000Z","updated_at":"2024-10-13T17:51:29.000Z","dependencies_parsed_at":"2024-06-19T17:39:38.445Z","dependency_job_id":"08801877-d67b-4e47-8f12-d99dc44b813c","html_url":"https://github.com/mdauner/sveltejs-forms","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdauner%2Fsveltejs-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdauner%2Fsveltejs-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdauner%2Fsveltejs-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdauner%2Fsveltejs-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdauner","download_url":"https://codeload.github.com/mdauner/sveltejs-forms/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339158,"owners_count":20923014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","form-validation","hacktoberfest","svelte","svelte-components","svelte3","sveltejs","yup"],"created_at":"2024-08-01T12:02:25.983Z","updated_at":"2025-04-05T13:08:00.492Z","avatar_url":"https://github.com/mdauner.png","language":"JavaScript","readme":"# sveltejs-forms\n\n![npm](https://img.shields.io/npm/v/sveltejs-forms)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/sveltejs-forms)\n![npm](https://img.shields.io/npm/dm/sveltejs-forms)\n\n![GitHub](https://img.shields.io/github/license/mdauner/sveltejs-forms)\n![Actions Status](https://github.com/mdauner/sveltejs-forms/workflows/CI/badge.svg)\n[![codecov](https://codecov.io/gh/mdauner/sveltejs-forms/branch/master/graph/badge.svg)](https://codecov.io/gh/mdauner/sveltejs-forms)\n\nDeclarative forms for [Svelte](https://svelte.dev/).\n\n[DEMO](https://svelte.dev/repl/8e7deaa261364b4f8b2c0caff1982eeb?version=3.23.0)\n\n## Features\n\n- optional schema-based validation through [Yup](https://github.com/jquense/yup)\n- access to nested properties using paths\n- supports custom components\n- provides `Input`, `Select`, `Choice` components to reduce boilerplate\n\n## Install\n\n```shell\n$ npm i sveltejs-forms\n```\n\nor\n\n```shell\n$ yarn add sveltejs-forms\n```\n\n## How to use\n\n### With provided `Input`, `Select`, `Choice` helper components\n\n```html\n\u003cscript\u003e\n  import { Form, Input, Select, Choice } from 'sveltejs-forms';\n  import yup from 'yup@0.27';\n\n  function handleSubmit({ detail: { values, setSubmitting, resetForm } }) {\n    setTimeout(() =\u003e {\n      console.log(values);\n      setSubmitting(false);\n      resetForm({\n        user: { email: 'test@user.com' }, // optional\n      });\n    }, 2000);\n\n    /**\n     * {\n     *   user: {\n     *    email: 'email@example.com'\n     *   },\n     *   password: '123456',\n     *   language: 'svelte',\n     *   os: 'osx,linux'\n     * }\n     */\n  }\n\n  function handleReset() {\n    console.log('form has been reset');\n  }\n\n  const schema = yup.object().shape({\n    user: yup.object().shape({\n      email: yup\n        .string()\n        .required()\n        .email(),\n    }),\n    password: yup.string().min(4),\n    language: yup.string().required(),\n    os: yup.string(),\n  });\n\n  const langOptions = [\n    { id: 'svelte', title: 'Svelte' },\n    { id: 'react', title: 'React' },\n    { id: 'angular', title: 'Angular' },\n  ];\n\n  const osOptions = [\n    { id: 'macos', title: 'macOS' },\n    { id: 'linux', title: 'Linux 🐧' },\n    { id: 'windows', title: 'Windows' },\n  ];\n\n  const initialValues = {\n    language: 'svelte',\n  };\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  :global(.sveltejs-forms) {\n    background-color: #f8f8f8;\n    display: inline-block;\n    padding: 1rem;\n    border: 1px solid #ccc;\n    border-radius: 5px;\n  }\n\n  :global(label) {\n    font-size: 0.8rem;\n    color: #888;\n    margin-bottom: 0.2rem;\n  }\n\n  :global(.message) {\n    font-size: 0.8rem;\n    color: #888;\n    margin: 0.2rem 0;\n    color: #f56565;\n  }\n\n  :global(input[type='text']),\n  :global(textarea),\n  :global(select) {\n    width: 100%;\n    background-color: white;\n    margin: 0;\n  }\n\n  :global(input[type='checkbox'] + label) {\n    display: inline-block;\n    margin-right: 2rem;\n  }\n\n  :global(.field) {\n    margin-bottom: 1rem;\n  }\n\t\n  button {\n    border-radius: 5px;\n    padding: 0.5rem 1rem;\n    margin-right: 1rem;\n    color: white;\n  }\n\n  button[type='reset'] {\n    background-color: #f56565;\n  }\n\n  button[type='submit'] {\n    background-color: #48bb78;\n    width: 80px;\n  }\n\u003c/style\u003e\n\n\u003cForm\n  {schema}  \u003c!-- optional --\u003e\n  {initialValues} \u003c!-- optional --\u003e\n  validateOnBlur={false} \u003c!-- optional, default: true --\u003e\n  validateOnChange={false} \u003c!-- optional, default: true --\u003e\n  on:submit={handleSubmit}\n  on:reset={handleReset}\n  let:isSubmitting\n  let:isValid\n\u003e\n  \u003cInput\n    name=\"user.email\" \u003c!-- nested field --\u003e\n    label=\"Email Address\"\n    value=\"test@user.com\" \u003c!-- initial value --\u003e\n    placeholder=\"e.g. user@example.com\" /\u003e\n  \u003cInput name=\"password\" type=\"password\" placeholder=\"Password\" /\u003e\n  \u003cSelect name=\"language\" options={langOptions} /\u003e\n  \u003cChoice\n    name=\"os\"\n    options={osOptions}\n    disabled\n    multiple /\u003e\n  \u003cbutton type=\"reset\"\u003eReset\u003c/button\u003e\n  \u003cbutton type=\"submit\" disabled={isSubmitting}\u003eSign in\u003c/button\u003e\n  \u003cdiv\u003eThe form is valid: {isValid}\u003c/div\u003e\n\u003c/Form\u003e\n```\n\n### With custom component:\n\n```html\n\u003cscript\u003e\n  import { Form } from 'sveltejs-forms';\n  import Select from 'svelte-select';\n  import yup from 'yup@0.27';\n\n  let svelteSelect;\n\n  function handleSubmit({ detail: { values, setSubmitting, resetForm } }) {\n    setTimeout(() =\u003e {\n      console.log(values);\n      setSubmitting(false);\n      svelteSelect.handleClear();\n      resetForm();\n    }, 2000);\n  }\n\n  const schema = yup.object().shape({\n    food: yup.string().required()\n  });\n\n  let items = [\n    { value: 'chocolate', label: 'Chocolate' },\n    { value: 'pizza', label: 'Pizza' },\n    { value: 'cake', label: 'Cake' },\n    { value: 'chips', label: 'Chips' },\n    { value: 'ice-cream', label: 'Ice Cream' },\n  ];\n\u003c/script\u003e\n\n\u003cForm\n  {schema}\n  on:submit={handleSubmit}\n  let:isSubmitting\n  let:setValue\n  let:values\n  let:errors\n  let:touched\u003e\n\n  \u003cSelect\n    {items}\n    bind:this={svelteSelect}\n    inputAttributes=\"{{ name: 'food' }}\"\n    hasError=\"{touched['food'] \u0026\u0026 errors['food']}\"\n    on:select=\"{({ detail }) =\u003e setValue('food', detail.value)}\"\n    on:clear=\"{() =\u003e setValue('food', '')}\"\n    selectedValue=\"{items.find(item =\u003e item.value === values['food'])}\"/\u003e\n\n  \u003cbutton type=\"submit\" disabled={isSubmitting}\u003eSubmit\u003c/button\u003e\n\u003c/Form\u003e\n```\n\n## Slot props\n\n| Name | Type |\n|------|------|\n| isSubmitting | `boolean`\n| isValid | `boolean`\n| setValue(path, value) | `function`\n| touchField(path) | `function`\n| validate() | `function`\n| values |  `object`\n| errors |  `object`\n| touched |  `object`\n\n## Contributions\n\n**All contributions are welcome.**\n","funding_links":[],"categories":["JavaScript","UI Componentes","components and libraries","hacktoberfest"],"sub_categories":["Comunidade Global","forms and validation"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdauner%2Fsveltejs-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdauner%2Fsveltejs-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdauner%2Fsveltejs-forms/lists"}