{"id":15932614,"url":"https://github.com/snugug/svelte-mega-forms","last_synced_at":"2026-01-20T00:41:58.067Z","repository":{"id":46191245,"uuid":"515182675","full_name":"Snugug/svelte-mega-forms","owner":"Snugug","description":"Dynamic forms for Svelte","archived":false,"fork":false,"pushed_at":"2022-10-16T14:11:17.000Z","size":165,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-14T07:16:58.659Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Svelte","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/Snugug.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-18T12:50:58.000Z","updated_at":"2022-08-11T18:56:09.000Z","dependencies_parsed_at":"2022-08-22T00:20:47.647Z","dependency_job_id":null,"html_url":"https://github.com/Snugug/svelte-mega-forms","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snugug%2Fsvelte-mega-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snugug%2Fsvelte-mega-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snugug%2Fsvelte-mega-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snugug%2Fsvelte-mega-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Snugug","download_url":"https://codeload.github.com/Snugug/svelte-mega-forms/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247810028,"owners_count":20999827,"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":[],"created_at":"2024-10-07T02:02:55.383Z","updated_at":"2026-01-20T00:41:58.030Z","avatar_url":"https://github.com/Snugug.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte Mega Forms\n\nGenerative forms for Svelte.\n\n## Installation \u0026 Usage\n\n```bash\nnpm i svelte-mega-forms\n```\n\n```svelte\n\u003cscript\u003e\n  import Form from 'svelte-mega-forms';\n\n  // Form structure\n  const form = [ /* ... */ ];\n\n  // Attributes for the generated form\n  const attributes = {\n    method: 'POST',\n    action: '/contact',\n  };\n\n  // Default values for the form\n  const values = {\n    'name': 'Cow McMoo',\n    'message[0]': 'This is a test note',\n  };\n\n  // Function to call when the form is submitted after all fields have been validated. Can be async\n  const submit = (values, form) =\u003e {};\n\u003c/script\u003e\n\n\u003cForm {form} {attributes} {values} {submit} /\u003e\n```\n\n## Creating a Form\n\nFields in a form are defined by an object with the following values:\n\n- `label` - Form label. Either this, `attributes['aria-label']`, or `attributes['aria-labelledby']`, is **required** for each field.\n- `name` - The unique name to identify the field. This is **required**.\n- `type` - The type of field to display. This is **required** to display a field, but will be ignored if `fields` is present.\n- `value` - The optional default value for the field\n- `required` - Whether the field is required, either `true` or `false`\n- `attributes` - Key/value pair of attributes to add directly to an input, good for adding things like `placeholder`, `min`, and `max`\n- `fields` - If you want to add a group to your form, `fields` will take an array of field objects (including other groups!) and render them out.\n- `validate` - A function with the signature of `(value, field, values)` that should return `true` if the field is valid, or a string or `false` if invalid. Can be async.\n- `repeatable` - Either `true` or `false`, and can be used for either a group or an individual field. Makes either the field or group repeatable, appending an index to the field's (or contained fields') name (i.e. `name[0]`). Repeating items can't be nested.\n- `if` - A function with the signature of `(values)` that returns either `true` or `false`. Will determine if the field or group should be displayed.\n- `options` - Either an array of strings, or an array of `{label: '', value: ''}` objects for fields that have multiple options, for instance selects or radio groups.\n- `_label` - Alternate label component to use. See [form register](#form-register)\n- `_group` - Alternate group component to use. See [form register](#form-register)\n\n## Form Register\n\nYou can register additional components to be used in the form, as well as default validation messages. To do so, import the `FormRegister` from the default component:\n\n```svelte\n\u003cscript\u003e\n  import Form, {FormRegister} from 'svelte-mega-forms';\n  import CustomLabel from './lib/CustomLabel.svelte';\n  import CustomInput from './lib/CustomInput.svelte';\n\n  FormRegister.set.label('custom-label', FunLabel);\n  FormRegister.set.input('custom-input', CustomInput);\n\n  FormRegister.messages.invalid = 'Oops! Try again!';\n\n  const form = [\n    {\n      label: 'Hello',\n      _label: 'custom-label',\n      type: 'custom-input',\n      name: 'all-custom-field'\n    }\n  ]\n\u003c/script\u003e\n\n\u003cForm {form} /\u003e\n```\n\nTo register a label, field, or group, use `FormRegister.set[label/field/group]` and pass in a name to identify the custom item and then the Svelte component to use. You can override the default component by using `'default'` for the component's name.\n\nFor messages, you can set them directly; the two that are available are `FormRegister.messages.required` and `FormRegister.messages.invalid`.\n\n### Maskable input\n\nSvelte Mega Form comes with an optional custom form, Masked Input, that uses [imask](https://www.npmjs.com/package/@imask/svelte) to provide a masked input field. It also exposes an additional field property, `mask`, for setting the field mask. To use it, you can import it and register like other custom fields:\n\n```svelte\n\u003cscript\u003e\n  import Form, {FormRegister} from 'svelte-mega-forms';\n  import MaskedInput from 'svelte-mega-forms/fields/MaskedInput.svelte';\n\n  FormRegister.set.input('masked', MaskedInput);\n\n  const form = [\n    {\n      label: 'Masked Input',\n      type: 'masked',\n      name: 'duration',\n      mask: {\n        mask: '00:00:00',\n        lazy: false,\n      },\n    }\n  ]\n\u003c/script\u003e\n```\n\n### Custom labels, fields, and groups\n\nWhen creating a custom field, label, or group, take a look at the existing ones for inspiration. A few key things to keep in mind are:\n\n- **Label** - Should export `field` and `name` properties, which will map to the field definition and the name the field should use.\n- **Group** - Should export `field` and `index` properties, which will map to the field definition and the current index, if it's being repeated. They should also import `svelte-mega-forms/Group.svelte` and `svelte-mega-forms/Input.svelte` and use those meta-components to render contained groups and inputs. `lib/fields/Fieldset.svelte` is the default group.\n- **Inputs** - Should export `field` and `name` properties, which will map to the field definition and the name the field should use. They should also import `svelte-mega-forms/Label.svelte` and `svelte-mega-forms/Message.svelte` to render the input's label, and message to optionally render validation error messages. The input's value should also be bound to the [form context's](#form-context) `values` store based on the input's name. Check out the default input implementation in `lib/fields/Input.svelte` or the implementation in `lib/fields/MaskedInput.svelte`. Inputs should also be disabled when the form context's `disabled` store is true.\n\n### Form context\n\nCustom labels, fields, and groups also have access to the `form` [context](https://svelte.dev/tutorial/context-api) with the following properties:\n\n- `fields` - Definition for each individual field in the form\n- `values` - A Svelte store of all values of all inputs in the form. You can set the value of a field using `values.setField(name, value)`, remove a field using `values.removeField(name)`, and set multiple fields using `values.batchSetFields(values)` (with an object of field names/values).\n- `disabled` - A boolean Svelte store denoting whether fields should be disabled\n- `submitting` - A boolean Svelte store denoting whether the form is being submitted\n- `validation` - A Svelte store for checking validation. You can use `validation.check(name, value)` to check the value of an individual field, or `validation.checkAll(values)` (with an object of field names/values) to check all the values for all passed in fields. Validations are async.\n- `elements` - Registered components\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnugug%2Fsvelte-mega-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnugug%2Fsvelte-mega-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnugug%2Fsvelte-mega-forms/lists"}