inertia-rails-forms

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 Rails, processing state, file upload detection, and history state. react-hook-form would duplicate or fight all of this.

When NOT to use <Form> or useForm:

• Data lookups — not a form submission. Use router.get with debounce + preserveState, or raw fetch for large datasets
• Inline single-field edits without navigation – router.patch directly, or useForm if you need error display on the field

NEVER:

• Use react-hook-form, vee-validate, or sveltekit-superforms — Inertia <Form> already handles CSRF, redirect following, error mapping, processing state, and file detection. These libraries fight Inertia's request lifecycle.
• Pass data={...} to <Form> — it has no data prop. Data comes from input name attributes automatically. data is a useForm concept.
• Use useForm for simple create/edit — <Form> handles these without state management. Reserve useForm for multi-step wizards, dynamic add/remove fields, or form data shared with sibling components.
• Use controlled value= instead of defaultValue on inputs — controlled inputs bypass <Form>'s dirty tracking, making isDirty always false.
• Omit value="1" on checkboxes — without it, the browser submits "on" and Rails won't cast to boolean correctly.
• Call useForm inside a loop or conditional — it's a hook (React rules apply). Create one form instance per logical form.