Forms are one of the most complex pieces of Frontend Development. In this article we will explore the concerns while selection of Form Library for React or Vue or Angular App.
If the form library, is experimented in tool like Storybook independent of your application code, the complexity arising later can be avoided. Learning from the Continuous Delivery practices, “if it hurts, do it more often, and bring the pain forward”. Therefore prepare a checklist after studying this article and plan effectively the roadmap.
Let's do the Separation of concerns first. Building forms have two types of concerns the Logical concerns (validation, multi value fields, debug errors, etc) and the Presentation Concerns (ease of styling, widgets provided).
Logical Concerns
Validation
Validation is an important concern in selection of any form library. Let us attempt to categorise the types of field validations:
- Simple validation: Validation of Field Data Type & RegExp Constrains (like Email, Url, Number, Date, etc)
- Complex validation: Dependent Field Validation (where a field is validated dependent upon on other field value) or validation of array of collection of fields.
- Async validation: Remote Validation for use cases like unique username validation.
Writing Validation Rules:
- Field Level Functions: Validation could be defined at level of each field (like the TextInput can define a prop, say validationFn to check Email RegExp).
- Form Data Structure Schema: Library (like yup or joi) allow you to write a schema that validates the whole data structure, including dependent fields.
Multi Value Field Collections
For a use case like Flight Ticket (with list of passengers), a collection of field is required. Ease for adding, removing, shuffling an item/entity in collection must be considered.
Multi Step Form
For a complex use case like Flight Ticket Booking, user may have to go through a journey of multiple forms before the final submission. Multi step forms become complex and ease of shifting steps (possible with animation effect, that is a presentation concern) and maintaining the state in multi steps should be studied, you may also like to use LocalStorage to retain state in case of page refresh or if user by mistake close the tab.
Field Focus and Scroll to Error
For managing Field Focus, or Scroll on First Error after submission and other important use cases where you might need the reference of input element, experiment how this can be accomplished in the selected library.
Dependent Fields and States
Field May become hidden depending upon some other field's value. Getting any field value must be easy at the top level (and in a sub form component that becomes part of main form).
Performance
Needless to say, performance is the most important criteria in complex forms. Jerks in UI when field value changes or field states hide, reflects poor performance in Form, study how best this can be improved.
Debug
For a good Developer Experience (DX), it must be easy to debug field values, fields touched and field errors. How easy it is to get these values and display them in UI (in footer of form or drawer) during development phase is important while building complex forms.
Presentation Concerns
Choosing Form UI Components via a UI Design Library like Ant Design or Material UI solves the Styling Concern. Alternatively you can create custom components library (which can be styled using Styled Components/css/scss). This is hard, author suggest to use some UI Library unless you have very special Design Concerns and can't be accomplished using common UI Libraries.
Many a times an additional component (say FormItem) act as a wrapper for any kind of Input. FormItem can show the label, error message, help message etc, and an input child element. FormItem + Input, may also provided as a single element.
Widgets
Number can be input via sliders, Text Box; Booleans can be input via Switch, Radio, Checkbox. Make a list of widgets required for your presentation and check availability of each and writing a new one from scratch if required like for Drag-n-Drop.
- Complex Widgets: Rich Text Editor, file uploads via Dropzone, Video Upload, Select with remote search / tag support may be required. Prepare a checklist of what all is required.
Styling Concerns
- Form Item Styling: Styling of label, error message, help text etc in ForItem, maybe you wish to align Label and Input in same line for Desktop and in different lines in Mobile or hide placeholder in Mobile.
- Input Styling: Want a Round Checkbox, Want to Change Select Placeholder Font, Border of Text Input... How easy it is to style these components.
- Animation: For Multi step forms or Dependent Fields, or Change State of Switch/Checbox, your design can have multiple kinds of animation that you will like to support. Please study the ease of such changes required in the libraries choosen.
Accessibility
Widgets must set accessibility props, like aria-label, aria-required, aria-invalid so as improve Accessibility Support.
(Note: The author has extensive experience in React. The thought process for other frameworks/libraries may be very similar. Suggestion are welcome to improve the article).
Top comments (0)