Forms
Usage notes
Group form fields together into smaller chunks, this makes the form feel easier to complete and less intimidating.
Usage notes
A different style of text for the supporting text separates it from the element label.
The label should follow sentence case; that is Upper case first word, then lower case second word(s).
Support text should be used to give key information that is essentially to complete the form field. Examples include password format and explanations for data collection.
Usage notes
Within the error message, Avoid words such as 'error', 'problem' or 'issue'. Be positive.
Valid HTML5 form elements should be used (for example here type="email" is used) so that the the browser is given hints as to the nature of the input field, so that the appropriate keyboard layout is used.
Usage notes
A secondary button style (support button) should be used when placed inline with a form element. Generally, there should only be one primary button in a form.
Usage notes
Select boxes where possible should default to a value. If this is not possible, default to "Please select..."