Input Fields

Input fields let users enter and edit text.

Input fields enable the user to interact with and input content.

There are instances, sometimes in the same form, where you need users to enter both short and long form content. Allow the size of the text input box to reflect the length of the content you expect the user to enter.

Here is examples on how the different input types look like. For more information on the different types, please see the MDN documentation.

You can vary the length of the input field. For optimal usability, use a size that corresponds with the type/amount of characters in the text-field. For example, the field for a postal code containing a maximum of 5 characters should be a small input field.

Use this element when you want to convey more helpfull information for the current input field. For more information about this, please read the Form Guidelines.

Where possible, add programmatic assistance. Detect and pre-fill inputs to reduce errors and save time. When the software can't determine the value that belongs in an input, use type-ahead to make suggestions. Use sentence-case for default values, detected values, and auto-completion text.

Real time validation helps to streamline the process and keep data clean when the user is filling out forms. For full guidelines, refer to the Forms documentation.

Use this element when the input field is invalid, and you want to relay a short concise error text to the user. For more information about this, you can read the Form Guidelines.