Forms are used to collect information from users. They should be easy to understand and use.
Customize the input field properties to see how they affect the component.
Forms are often the main point of friction in a product. A well-designed form guides the user through the data entry process, minimizing effort and errors. Poor forms lead to drop-offs and frustration.
Clear, concise descriptions of what information is needed. Top-aligned is usually best for scanning.
The interactive fields (text, select, checkbox). Should be sized appropriately for the content.
Real-time or on-submit feedback. Success, warning, and error states.
Hints or instructions to assist the user, placed near the relevant field.
Vertical forms are easier to scan and complete than multi-column layouts.
Group related fields together (e.g., Personal Info, Address) to break up long forms.
Distinguish between primary (Submit) and secondary (Cancel) actions.