Understanding UI forms design

A form is a universal term for capturing and submitting user input. Forms can be anywhere in the interface and are used to submit information, initiate processes, sign into an app, request data, or make purchases.

Forms UI consist of form fields or inputs, which are standalone components in a form. These input elements can include text areas, dropdowns, toggles, counters, and selects.

The form fields and inputs can include labels, errors, hints, prefixes/suffixes, and icons. Other elements like Radio Buttons, Checkboxes, and Buttons are not part of a form field.

We can use each input component without wrapping it inside a form field, but they won't be connected to each other logically, meaning they won't function as a whole.

A form is what unites these input fields, making them track user input and produce fully functional outcomes.

UI forms best practices

When working with forms, it's necessary to ask questions and request user information that is only strictly necessary for the form's functioning. Avoid overloading forms. Instead, opt for splitting massive forms into separate steps.

Provide hints to forms with complex requirements or rules, such as a certain number of characters per password input. Highlight error messages with captions or labels. Keep labels and captions short and to the point.

Bonus: When possible, use the input text itself as a hint or to indicate required data, rather than relying on separate labels or captions.