guidelines: inertia-react: v0.1 of 'forms' guidelines

Author: ashleyhindle

.ai/inertia-laravel/2/core.blade.php

@@ -11,3 +11,14 @@
 
 ### Deferred Props & Empty States
 - When using deferred props on the frontend, you should add a nice empty state with pulsing / animated skeleton.
+
+## Inertia Forms Core
+@if($assist->inertia()->hasFormComponent())
+    - The recommended way to build forms when using Inertia is with the `<Form>` component, a useful example is below. Use `search-docs` with the `form component` query for guidance.
+    - Forms can also be built using the `useForm` helper for more programmatic control, or to follow existing conventions. Use `search-docs` with the `useForm helper` query for guidance.
+    @if($assist->inertia()->hasFormComponentResets())
+        - `resetOnError`, `resetOnSuccess`, and `setDefaultsOnSuccess` are available on the `<Form>` component. Use `search-docs` with 'form component resetting' for explicit guidance.
+    @else
+        - This version of Inertia does NOT support `resetOnError`, `resetOnSuccess`, or `setDefaultsOnSuccess` on the `<Form>` component. Using these will cause errors.
+   @endif
+@endif

.ai/inertia-laravel/core.blade.php

@@ -2,6 +2,7 @@
 
 - Inertia.js components should be placed in the `resources/js/Pages` directory unless specified differently in the JS bundler (vite.config.js).
 - Use `Inertia::render()` for server-side routing instead of traditional Blade views.
+- Use `search-docs` for accurate guidance on all things Inertia.
 
 <code-snippet lang="php" name="Inertia::render Example">
 // routes/web.php example

.ai/inertia-react/1/.gitkeep

@@ -1,6 +1,6 @@
 ## Forms in Inertia
 
-- For form handling, use `router.post` and related methods. Do not use regular forms.
+- For form handling in Inertia pages, use `router.post` and related methods. Do not use regular forms.
 
 @verbatim
 <code-snippet name="Inertia React Form Example" lang="react">

.ai/inertia-react/1/forms.blade.php

@@ -1,32 +1,23 @@
 @php
 /** @var \Laravel\Boost\Install\GuidelineAssist $assist */
 @endphp
-
 ## Forms in Inertia
 
 @if($assist->inertia()->hasFormComponent())
-- The recommended way to build forms when using Inertia is with the `<Form>` component. Use `search-docs` with `form component` for guidance.
-- Forms can also be built using the `useForm` helper for more programmatic control, or to follow existing conventions. Use `search-docs` with `useForm helper` for guidance.
-
 @boostsnippet("Example form using the `<Form>` component", "react")
 import { Form } from '@inertiajs/react'
 
 export default () => (
     <Form action="/users" method="post">
         {({
-        errors,
-        hasErrors,
-        processing,
-        progress,
-        wasSuccessful,
-        recentlySuccessful,
-        setError,
-        clearErrors,
-        resetAndClearErrors,
-        defaults,
-        isDirty,
-        reset,
-        submit,
+            errors,
+            hasErrors,
+            processing,
+            wasSuccessful,
+            recentlySuccessful,
+            clearErrors,
+            resetAndClearErrors,
+            defaults
         }) => (
         <>
         <input type="text" name="name" />
@@ -43,14 +34,33 @@
     </Form>
 )
 @endboostsnippet
-
-    @if($assist->inertia()->hasFormComponentResets())
-    - Added `resetOnError`, `resetOnSuccess`, and `setDefaultsOnSuccess` to the `<Form>` component. Use `search-docs` with 'form component resetting' for explicit guidance.
-    @else
-    - This version of Inertia does NOT support `resetOnError`, `resetOnSuccess`, or `setDefaultsOnSuccess` on the `<Form>` component.
-    @endif
 @endif
 
 @if($assist->inertia()->hasFormComponent() === false)
-            - Forms can be built using the `useForm` helper. Use `search-docs` with `useForm helper` for guidance.
+{{-- Inertia 2.0.x, not 2.1.0 or higher. So they still need to use 'useForm' --}}
+    @boostsnippet("Inertia React useForm example", "react")
+    import { useForm } from '@inertiajs/react'
+
+    const { data, setData, post, processing, errors } = useForm({
+        email: '',
+        password: '',
+        remember: false,
+    })
+
+    function submit(e) {
+        e.preventDefault()
+        post('/login')
+    }
+
+    return (
+    <form onSubmit={submit}>
+        <input type="text" value={data.email} onChange={e => setData('email', e.target.value)} />
+        {errors.email && <div>{errors.email}</div>}
+        <input type="password" value={data.password} onChange={e => setData('password', e.target.value)} />
+        {errors.password && <div>{errors.password}</div>}
+        <input type="checkbox" checked={data.remember} onChange={e => setData('remember', e.target.checked)} /> Remember Me
+        <button type="submit" disabled={processing}>Login</button>
+    </form>
+    )
+    @endboostsnippet
 @endif

.ai/inertia-react/2/forms.blade.php

@@ -0,0 +1,34 @@
+## Forms in Inertia
+
+- For form handling, use `router.post` and related methods. Do not use regular forms.
+
+@verbatim
+<code-snippet lang="svelte" name="Inertia Form Example">
+<script>
+    import { router } from '@inertiajs/svelte'
+
+    let values = {
+        first_name: null,
+        last_name: null,
+        email: null,
+    }
+
+    function handleSubmit() {
+        router.post('/users', values)
+    }
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+    <label for="first_name">First name:</label>
+    <input id="first_name" bind:value={values.first_name}>
+
+    <label for="last_name">Last name:</label>
+    <input id="last_name" bind:value={values.last_name}>
+
+    <label for="email">Email:</label>
+    <input id="email" bind:value={values.email}>
+
+    <button type="submit">Submit</button>
+</form>
+</code-snippet>
+@endverbatim

.ai/inertia-svelte/1/forms.blade.php

@@ -0,0 +1,73 @@
+@php
+    /** @var \Laravel\Boost\Install\GuidelineAssist $assist */
+@endphp
+## Forms in Inertia
+- There are critical differences between Svelte 4 and 5, use the `search-docs` tool for up-to-date guidance.
+@if($assist->inertia()->hasFormComponent())
+    @boostsnippet("Example form using the `<Form>` component", "svelte5")
+    <Form action="/users" method="post">
+        {#snippet children({
+        errors,
+        hasErrors,
+        processing,
+        progress,
+        wasSuccessful,
+        recentlySuccessful,
+        setError,
+        clearErrors,
+        resetAndClearErrors,
+        defaults,
+        isDirty,
+        reset,
+        submit,
+        })}
+        <input type="text" name="name" />
+
+        {#if errors.name}
+        <div>{errors.name}</div>
+        {/if}
+
+        <button type="submit" disabled={processing}>
+            {processing ? 'Creating...' : 'Create User'}
+        </button>
+
+        {#if wasSuccessful}
+        <div>User created successfully!</div>
+        {/if}
+        {/snippet}
+    </Form>
+    @endboostsnippet
+@endif
+
+@if($assist->inertia()->hasFormComponent() === false)
+    {{-- Inertia 2.0.x, not 2.1.0 or higher. So they still need to use 'useForm' --}}
+    @boostsnippet("Inertia React useForm example", "svelte")
+    <script>
+        import { useForm } from '@inertiajs/svelte'
+
+        const form = useForm({
+            email: null,
+            password: null,
+            remember: false,
+        })
+
+        function submit(e) {
+            e.preventDefault() /* Only required with Svelte 5 */
+            $form.post('/login')
+        }
+    </script>
+
+    <form onsubmit={submit}>
+        <input type="text" bind:value={$form.email} />
+        {#if $form.errors.email}
+        <div class="form-error">{$form.errors.email}</div>
+        {/if}
+        <input type="password" bind:value={$form.password} />
+        {#if $form.errors.password}
+        <div class="form-error">{$form.errors.password}</div>
+        {/if}
+        <input type="checkbox" bind:checked={$form.remember} /> Remember Me
+        <button type="submit" disabled={$form.processing}>Submit</button>
+    </form>
+    @endboostsnippet
+@endif

.ai/inertia-svelte/2/forms.blade.php

@@ -0,0 +1,10 @@
+## Inertia + Svelte
+
+- Use `router.visit()` or `<Link>` for navigation instead of traditional links.
+
+@boostsnippet("Inertia Client Navigation", "svelte")
+import { inertia, Link } from '@inertiajs/svelte'
+
+<a href="/" use:inertia>Home</a>
+<Link href="/">Home</Link>
+@endboostsnippet

.ai/inertia-svelte/core.blade.php

@@ -0,0 +1,38 @@
+## Forms in Inertia
+
+- For form handling in Inertia pages, use `router.post` and related methods. Do not use regular forms.
+
+@verbatim
+<code-snippet lang="vue" name="Inertia Vue Form Example">
+<script setup>
+    import { reactive } from 'vue'
+    import { router } from '@inertiajs/vue3'
+    import { usePage } from '@inertiajs/vue3'
+
+    const page = usePage()
+
+    const form = reactive({
+        first_name: null,
+        last_name: null,
+        email: null,
+    })
+
+    function submit() {
+        router.post('/users', form)
+    }
+</script>
+
+<template>
+    <h1>Create {{ page.modelName }}</h1>
+    <form @submit.prevent="submit">
+        <label for="first_name">First name:</label>
+        <input id="first_name" v-model="form.first_name" />
+        <label for="last_name">Last name:</label>
+        <input id="last_name" v-model="form.last_name" />
+        <label for="email">Email:</label>
+        <input id="email" v-model="form.email" />
+        <button type="submit">Submit</button>
+    </form>
+</template>
+</code-snippet>
+@endverbatim