Nets Design logo and other specific symbols

Input Fields

Input fields allow people to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted). Input fields can span single or multiple lines.

Guidelines

Ideally, you should keep your forms as simple as possible, only asking your users for the info you absolutely need to help achieve your business goals. Follow along with these guidelines to help with a better completion rate of your forms:

  1. Input field widths should be proportional to the length of input they take. This allows users to differentiate between the nature of the information intended in each field when scanning the form, helping with a quicker completion rate.
  2. All input fields should have labels, which should never be hidden.
  3. Input field labels should be aligned above their corresponding fields.
  4. Labels should be short, direct and in sentence case. Avoid a full stop at the end of labels.
  5. Ensure form elements have enough spacing between them.
  6. Only ask for the information you absolutely need. If you do find the need to ask for optional information, mark the labels pertaining to those fields as optional. Avoid marking mandatory fields with an asterisk.
  7. Never use a single-row input field for data that requires multiple lines of text. Use a text area input field instead, but taking care that the height of the text are is proportional to the amount of text to be entered.
  8. Make sure users can enter information in the form at a smaller screen size. This includes making form fields 100% width at smaller screen sizes.
Nets Input Fields image
Example of form layout

Input field states

Default

Nets Input Fields image

Active

Nets Input Fields image

Error

Nets Input Fields image

Success

Nets Input Fields image

Area text

Nets Input Fields image

Disabled

Nets Input Fields image