Echoes: Notes & Signals by James StoneEchos

Foldable UI Forms

3 min read

title: Foldable UI Forms Design and Implementation category: PUBLIC/Tech/Development/React tags:

  • likely-original
  • in-progress
  • public-candidate llm_summary: Design document for form components in the Foldable UI library, including form field simplification, validation patterns, and implementation plans description: Comprehensive design document for form components in the Foldable UI library, focusing on rapid prototyping, progressive enhancement, and developer ergonomics.

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
  1. 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
  1. 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
  1. Add name generation functionality
  • Implement function to convert label to camelCase + unique hash
  • Add internal state to track generated names consistently between renders
  1. 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
  1. 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