Currently, there are three layers of components to the form library (bottom to top:
- The Input components (text for example) is responsible for actual user interaction with form input/control. This can be a simple
<input> or it can be a complex composite component. These are managed state components where a user "change" event is handled and the managed value is passed back to the input component for rendering.
- The Field component wraps an Input component and is responsible for consistent form field UI (label, error messaging, state styles) and connecting to the parent form component.
- The Form component manages a data store for values and errors as well as validation logic, high-level rendering and various form and field lifecycle behaviors.
While our form field (input components) currently integrate with our Form component, they are not functional without a parent Form component currently. Additionally, the basic interface for these input components isn't conventional.
Both Input components and Field wrapped Input components should be refactored to use conventional onChange and value prop names and function with or without a parent Form component.