inertia-rails-forms
Build forms in Inertia.js + Rails using the `<Form>` component for simple create/edit workflows or `useForm` for multi-step wizards and dynamic fields. Automatic CSRF token handling, error mapping, file upload detection, and progress tracking eliminate the need for external form libraries. React, Vue, and Svelte examples included.
inertia-rails-forms handles form creation, validation, and file uploads for Inertia.js + Rails apps using the Form component or useForm hook.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-02-13
inertia-rails-forms handles form creation, validation, and file uploads for Inertia.js + Rails apps using the Form component or useForm hook. Build forms in Inertia.js + Rails using the `<Form>` component for simple create/edit workflows or `useForm` for multi-step wizards and dynamic fields. Automatic CSRF token handling, error mapping, file upload detection, and progress tracking eliminate the need for external form libraries. React, Vue, and Svelte examples included.
Use it when
- inertia-rails-forms handles file uploads with built-in progress tracking.
- Yes, inertia-rails-forms supports multi-step wizard forms with dynamic fields using the `useForm` hook.
Verify before relying
Read SKILL.md below before installing (5 files). Open directory: indexed for reading, not audited.
Install
inertia-rails/skills/inertia-rails-forms
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you build forms with Inertia.js and Rails?
inertia-rails-forms provides two main approaches: use the `<Form>` component for straightforward create/edit workflows, or the `useForm` hook for complex multi-step wizards and dynamic fields. Both automatically handle CSRF tokens, map validation errors from Rails, detect file uploads, and track submission progress—eliminating the need for external form libraries. Examples are available for React, Vue, and Svelte.
What file upload capabilities does inertia-rails-forms support?
inertia-rails-forms handles file uploads with built-in progress tracking. The library automatically detects when your form contains files and manages the upload lifecycle. You can monitor upload progress in real-time, making it ideal for large files or when you need to display upload status to users.
Can inertia-rails-forms create multi-step wizard forms?
Yes, inertia-rails-forms supports multi-step wizard forms with dynamic fields using the `useForm` hook. This approach lets you build complex workflows where fields change based on user input, maintain state across steps, and validate progressively as users advance through the wizard.
How does inertia-rails-forms display form validation errors?
inertia-rails-forms automatically maps validation errors from your Rails backend and makes them available in the form state. You can easily display these errors next to their corresponding fields, and the library tracks which fields have errors for conditional styling or error messaging.
Does inertia-rails-forms support edit forms with pre-populated data?
Yes, inertia-rails-forms handles edit forms with pre-populated data and includes dirty state tracking. This lets you know which fields have been modified, enable/disable submit buttons conditionally, and warn users before they navigate away from unsaved changes.
What form processing states can inertia-rails-forms track?
inertia-rails-forms tracks form processing state throughout the submission lifecycle, including loading, error, and success states. Combined with progress tracking for file uploads and dirty state detection for edits, you have full visibility into your form's current condition at any moment.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Inertia Rails Forms
Full-stack form handling for Inertia.js + Rails.
Before building a form, ask:
- Simple create/edit? → <Form> component (no state management needed)
- Requires per-field UI elements? → Still <Form>.
React useState for UI state (preview URL, file size display) is independent
of form data — <Form> handles the submission; useState handles the UI.
- Multi-step wizard, dynamic fields (add/remove inputs), or form data
shared with sibling components (e.g., live preview panel)? → useForm hook
- Tempted by react-hook-form? → Don't. Inertia's <Form> already handles CSRF
tokens, redirect following, error mapping from
(truncated - see the full file via the links below)
File tree — 5 files
skills/inertia-rails-forms/SKILL.md
skills/inertia-rails-forms/references/advanced-forms.md
skills/inertia-rails-forms/references/file-uploads.md
skills/inertia-rails-forms/references/svelte.md
skills/inertia-rails-forms/references/vue.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build forms with Inertia.js and Rails using Form component or useForm hook”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
shadcn-inertia teaches you how to use shadcn/ui components in Inertia Rails React applications by adapting Next.js examples. It replaces shadcn's form components and react-hook-form with Inertia's Form component, removes Next.js directives and APIs, and covers dialogs, tables, toasts, and dark mode setup.
Inertia Coder guides you through building modern single-page applications that combine Inertia.js with Rails and your choice of React, Vue, or Svelte. It covers controller setup, page component patterns, form handling with the useForm hook, shared data management, and client-side routing—all without the complexity of separate APIs.
Adapt shadcn-svelte (bits-ui) components for Inertia.js + Rails + Svelte apps by replacing SvelteKit patterns with Inertia equivalents. Wire inputs to Inertia Form via name attributes, manage dialogs and tables with Inertia router, and configure flash-based toasts with Rails initializers.
This skill shows how to wire shadcn-vue UI components into Inertia Rails Vue 3 applications, replacing Nuxt-specific patterns with Inertia equivalents. Learn to bind form inputs via name attributes, manage dialogs with router state, render server-sorted tables, and display flash toasts—plus avoid common pitfalls like v-model conflicts and frozen computed values.
This skill provides 30+ patterns for Laravel, Inertia.js, and React integration, covering page components, form handling with useForm, navigation, shared data, layouts, and file uploads. Use it when building Inertia page components, managing forms with validation, or implementing persistent layouts in full-stack applications.
Master the server-driven mental model behind Inertia Rails: the server owns routing, data, and auth while React renders UI only. This skill routes you to the right pattern for pages, forms, navigation, and data refresh through a decision matrix covering data sources, state ownership, and common anti-patterns to avoid.