Published on March 26, 2021
  • Added form helper (#558), #575).
  • Renamed link component to fix compilation conflicts (#549).
  • Improved render component for nested layouts (#529).

New form helper

This release adds a new form helper to the Svelte adapter, similar to the existing form helpers in the Vue 2, Vue 3 and React adapters. This was contributed by @mariojankovic. It is designed to help reduce the amount of boilerplate needed for typical forms. Here's how to use it:

import { useForm } from '@inertiajs/inertia-svelte'

import TextInput from './TextInput'
import LoadingButton from './LoadingButton'

let form = useForm({
  name: null,
  email: null,
function submit() {

<form on:submit|preventDefault={submit}>
  <TextInput type="text" bind:value={$} error="$" />
  <TextInput type="text" bind:value={$} error="$" />
  <LoadingButton loading={$form.processing} type="submit">Submit</LoadingButton>

The form helper also accepts a second "options" argument. This lets you set a form key, needed if there are multiple forms on the page. You can also disable the automatic remember behaviour by setting the remember option to false.

let form = useForm({
  email: null,
  password: null,
}, {
  key: 'login',
  remember: false,

Here are a complete list of all the available form properties:

  • form.errors
  • form.hasErrors
  • form.processing
  • form.progress
  • form.wasSuccessful
  • form.recentlySuccessful

And here is a complete list of all the available form methods:

  • form.reset()
  • form.reset(...fields)
  • form.clearErrors()
  • form.clearErrors(...fields)
  • form.transform(callback)
  • form.submit(method, url, options)
  • form.get(url, options)
  •, options)
  • form.put(url, options)
  • form.patch(url, options)
  • form.delete(url, options)