ilokesto

Svelte

Install svelte as the peer and import from @ilokesto/form/svelte. Svelte is action-centered: useForm(form) returns form, register, and useFormState(). It does not expose the same useField or useRegister helpers as React, Vue, and Solid.

<script lang="ts">
  import { useForm } from '@ilokesto/form/svelte';
  const { form: controller, register, useFormState } = useForm(form);
  const state = useFormState();
</script>

<form onsubmit={(event) => { event.preventDefault(); void controller.submit(save); }}>
  <input use:register={{ name: 'email', schema: emailSchema }} />
  <input type="checkbox" use:register={{ name: 'remember', type: 'checkbox' }} />
  <select multiple use:register={{ name: 'roles' }}>
    <option value="admin">Admin</option>
  </select>
  <button disabled={!$state.isDirty || !$state.isValid}>Save</button>
</form>

The action attaches DOM listeners and cleans them up when the element is destroyed. useFormState() returns a Svelte readable store containing aggregate state such as errors, dirty fields, touched fields, validity, submitting state, and submitCount.

Cautions

Create the core form in a stable place, install the matching peer dependency, and import only from this adapter subpath in framework components. Keep server actions and domain helpers on the root @ilokesto/form API when they do not need rendering.

On this page