Labels are clear and concise
Proper spacing and alignment between and around every form element
Forms show consisten field widths
Fors are not wider than 80em (80 chars)
Textareas are expandable (show 2 rows max initially)
Required fields are ordered first
Fields with strong cohesion are displayed close together (for instance start date, end date)
Use logical sequence of fields.
show wide fields unders small fields (Avoid expanding text area's to hide fields below)
When a user is picking from a series of options in a form, it's important to use the correct control element. Use the following logic to choose the correct control element:
For general yes/no choices on a form (booleans) with a save/submit button visible on the screen, use a checkbox,
For yes/no choices (booleans) that do not require a save/submit button to activate, use a toggle.
For a range of numbers, use a slider or a five-star control.
For 2-7 options displayed horizontally, use a radio segment. Be careful to check for wrapping!
For 2-7 options displayed vertically, use a radio group.
For more than seven options, use an autocomplete.