forms

Forms are where type safety and UX collide. react-hook-form keeps re-renders low, and Zod gives me a single schema I can share between frontend and backend if I want. I wire zodResolver so field-level errors show up automatically, and I keep a stable

Dependent dropdowns are a classic UX pattern where one select populates based on another's value. With Stimulus, I handle this entirely client-side after the initial page load by storing options as data attributes or fetching them via AJAX. When the p

For forms with multiple fields, I like an error summary at the top. With Turbo Streams, you can update just the summary target when validation fails. This is helpful when the form is long and the user might not see inline errors immediately. The serve

In a Turbo app, returning the right HTTP status is not optional—it controls how Turbo treats the response. For invalid form submissions, return 422 Unprocessable Entity and render the form with errors. If you mistakenly return 200, Turbo may treat it

A character counter is small, but it removes uncertainty for users (especially when there’s a limit). I implement it with Stimulus so it stays reusable: attach to a wrapper, declare input + output targets, and compute remaining characters based on an

Formsets handle multiple forms on one page. I use modelformset_factory for editing existing objects and inlineformset_factory for related objects. The extra parameter controls empty forms shown. I validate formsets with formset.is_valid() and save wit

Wizards are often over-engineered with client state machines. With Turbo Frames, I render each step inside a frame, and the “Next” button simply POSTs to update the record and then redirects to the next step URL. If validation fails, I re-render the s

After a successful inline create, I usually want to clear the form. You can replace the whole form partial, but sometimes you want to preserve other state (like which field was focused) and simply reset values. A clean Hotwire approach is a custom Tur

Hotwire forms feel “native” when invalid submissions keep you in context. Replace just the form frame with errors and keep the rest of the page intact. Return 422 so clients and caches behave correctly.

Losing form data due to browser crashes or accidental navigation is frustrating. An autosave controller periodically saves form state to localStorage and restores it on page load. I debounce the save operation to avoid excessive writes and clear the d

For nested forms, Stimulus can manage the DOM while Rails handles the final params. Use a hidden template + a unique timestamp key. This keeps the server-rendered form simple and avoids JS frameworks.

Async validation checks constraints that require server communication, like username availability or email uniqueness. React Hook Form's validate option accepts async functions that return error messages or true. I debounce async validators to avoid e