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
Install
inertia-rails/skills/inertia-rails-forms
git clone https://github.com/inertia-rails/skills
cp -r skills/skills/inertia-rails-forms ~/.claude/skills/inertia-rails-formsnpx skillfed install inertia-rails/skills/inertia-rails-formsFrequently 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)
Read as markdown · JSON record · Browse the source repository
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