Skip to content

[2.x] Add Form Context Support#2671

Merged
pascalbaljet merged 20 commits intoinertiajs:masterfrom
laserhybiz:patch-1
Jan 14, 2026
Merged

[2.x] Add Form Context Support#2671
pascalbaljet merged 20 commits intoinertiajs:masterfrom
laserhybiz:patch-1

Conversation

@laserhybiz
Copy link
Copy Markdown
Contributor

@laserhybiz laserhybiz commented Oct 29, 2025

This PR adds the ability to inject form state and methods into descendant components using Vue's provide/inject API.

This is useful when using wrapper components which encapsulates form functionalities.

Before:
Form state is only accessible via slot props or template refs and has to be passed down to children

<!-- Parent.vue -->
<Form
  action="/users"
  method="post"
  #default="{
    errors,
  }"
>
  <Input name="name" :error="errors.name" />
</Form>

<!-- Input.vue -->
<script setup>
defineProps({
  name: {
    type: String,
    required: true,
  },
  error: {
    type: String,
    default: null,
  },
})
</script>

<template>
  <input type="text" :name="name" />

  <div v-if="error">
    {{ error }}
  </div>
</template>

After:
All form state is accessible in any descendant component

<!-- Parent.vue -->
<Form
  action="/users"
  method="post"
>
  <Input name="name" />
</Form>

<!-- Input.vue -->
<script setup>
import { useFormContext } from '@inertiajs/vue3'

defineProps({
  name: {
    type: String,
    required: true,
  },
})

const form = useFormContext()
</script>

<template>
  <input type="text" :name="name" />

  <div v-if="form.errors[name]">
    {{ form.errors[name] }}
  </div>
</template>

The useFormContext hook returns the same interface as the Form's slot props and template ref, including all state (errors, isDirty, processing, etc.) and methods (submit, reset, clearErrors, etc.).

I'll add the tests if this is approved.

@laserhybiz
Copy link
Copy Markdown
Contributor Author

I guess I will also have to add this to the other adapters if it's approved.

@laserhybiz
Copy link
Copy Markdown
Contributor Author

@pascalbaljet is this something you’d consider merging?

@pascalbaljet
Copy link
Copy Markdown
Member

Yes, I like it! Could you add tests and implement it for the other adapters as well? Thanks!

@pascalbaljet pascalbaljet added the needs more info/work Needs more info from the author or additional work to get merged label Nov 27, 2025
@laserhybiz
Copy link
Copy Markdown
Contributor Author

@pascalbaljet I’ve implemented this for the React adapter and added tests for both Vue and React. the tests are currently failing because the svelte implementation is still missing.

I don’t have any experience with svelte, could you help with that part? otherwise, I’ll try to make some time to dig into it myself.

@pascalbaljet pascalbaljet changed the title Add Form Context Support [2.x] Add Form Context Support Jan 13, 2026
@pascalbaljet pascalbaljet removed the needs more info/work Needs more info from the author or additional work to get merged label Jan 13, 2026
@pascalbaljet
Copy link
Copy Markdown
Member

Thanks again @laserhybiz!

@pascalbaljet pascalbaljet merged commit b55fbc0 into inertiajs:master Jan 14, 2026
27 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants