Foldable UI Forms Design and Implementation

Current Implementation Notes

• Use react-query forms
• Don’t update any errors unless you submit
• Auto focus 1st form element with an error, issue the focus ring is then blue which is confusing
• Error text below
• How to add additional information somewhere. How to write good UX error messages
• How to treat required, right now it is text

Next Steps

• Add other common elements:
  • Checkboxes and radios (unless going full speed through with radio and check cards pattern)
  • File upload (maybe pull file upload pattern from that one that is on top of shadcn, what is it called accentrix or something?)

Questions to Explore

• What are other common patterns in forms?
• What are common layouts in forms?
  • Login?
  • Password reset…
  • Registration page
  • Profile
• How to handle autosaving in some cases

Research & Validation

Let’s validate these with ideas from:

• NN/G
• Smashing Mag
• CSS Tricks
• etc.

And build what is the forms philosophy. How to quickly copy and paste from examples.

---

Next Steps: Prototyping → react-hook-form

FormField Simplification: Decisions & Implementation Plan

Key Decisions

1. Simplify the FormField API to prioritize rapid prototyping with minimal required props

   • Make name optional in the TypeScript interface
   • Default to type=“text” when not specified
   • Generate random hash IDs for unnamed fields based on label text

2. Implement progressive enhancement pattern

   • Start with minimal validation during prototyping
   • Support gradual addition of explicit field names and validation rules
   • Maintain compatibility path to full React Hook Form integration

3. Maintain ergonomic developer experience

   • Allow <FormField label="First Name" /> as minimal valid usage
   • Preserve ability to add specificity when needed: <FormField label="First Name" name="firstName" />

Implementation Tasks

1. Update FormField TypeScript interface

   • Make name, type, and validation parameters optional
   • Ensure backward compatibility with existing form implementation

2. Add name generation functionality

   • Implement function to convert label to camelCase + unique hash
   • Add internal state to track generated names consistently between renders

3. Simplify validation handling

   • Make validation rules optional during prototyping
   • Default to basic required/type validation based on field type
   • Maintain extensibility for custom validation rules

4. Update form collection logic

   • Ensure form can collect values from fields with generated names
   • Add option for simplified form submission during prototyping

Future Considerations

• Create smooth transition path from prototype to production form
• Add schema/array-based form generation option for rapid form creation
• Consider building adapter layer between simplified form and React Hook Form for final implementation

This approach will significantly reduce development friction during prototyping while preserving a clear path to production-ready implementation.

Resources / Links

• Some interesting info here: https://coyleandrew.medium.com/form-design-best-practices-9525c321d759