These components are used as the building blocks for creating all types of forms. These forms should be able to be used on all devices ie desktop, mobile and tablet.
Labels - Always label the form component ie a text input, select box to help the user understand it’s meaning.
Order the components logically - Reflect the natural flow of a conversation. For example would you ask for someones bank details before you asked for their name?
Group related information - For example Personal Details, and Payment Details.
Never need to explain - If it’s too complicated for the user to fill out then you will need to rethink it.
Error message - Notify the user as soon as an error has occured. Validation message - Only valid at key points so as not to frustrate the user.
Columns - Forms fields should only ever consist of a single column.
Column alignment - Mobile keep centred with minimum 5px border. Desktop and Tablet keep centred with the page.
Form fields - these shouldn’t extend 400 px on Desktop and Tablet.
|o-colors||>=2.5.0 <4||Out of date||4.0.5|