Input fields give users a way to enter any kind of text into a field. Input fields can be programmed to have conditional limitations. When necessary, they can include hint text to let the user know what to enter, or to give them an example. Generally speaking, input fields should include a top or left label.
Input fields come with 2 label positioning options.
Input fields come in the following states:
Input fields come in following 3 sizes:
Input fields can be programmed by engineers on a case-by-case basis to limit what the user can enter. These can include character limits, can only accept certain types of characters (numericals, letters, special characters), can require validation, etc.
Input fields can be programmed to be auto-formatted but cannot currently accept input masks.
Here are a few examples of how best to input fields.
Use title case for Input Field labels.
Avoid using sentence case for Input Field labels.
We suggest the following spacing guidelines for desktop and mobile use cases.
We suggest the following guidelines for indicating an input is either required or optional.