Input fields allow users to add text within a defined area.
Use input fields when requiring users to enter text (like email address, account name, search keyword, etc.) that can’t be automatically generated or displayed.
The following specs are designed for desktop and web.
Label margin bottom:
Label: Grey 90
Border: Grey 90 a20
rgba(12, 12, 13, 0.2)
Placeholder: Grey 50
Placeholder icon: Grey 90 a40
rgba(12, 12, 13, 0.4)
Action icon: Grey 90 a60
rgba(12, 12, 13, 0.6)
Border color: Grey 90 a20
rgba(12, 12, 13, 0.2)
Border color: Grey 90 a30
rgba(12, 12, 13, 0.3)
Border color: Blue 50
0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3)
Border color: Yellow 60
0 0 0 1px #d7b600, 0 0 0 4px rgba(215, 182, 0, 0.3)
Border color: Red 60
0 0 0 1px #d70022, 0 0 0 4px rgba(251, 0, 34, 0.3)
In text fields, when a user starts typing display a clear text field icon on the opposite side of the field.
In input fields, when the text overflows outside the field add a linear gradient to indicate to users that something is hidden.
In password fields, when a user starts typing display a password show icon and password hide icon on press.
Input Fields Messages
Prioritize brevity over niceties. Don’t say please. Just tell people what to do. “Choose a number that is less than…”
Be as specific as possible in the message. “Choose a date” or “Choose a time” or “Enter an address” are all better than “Enter a value.”
Speak to users’ cognitive processes instead of their tactile ones where possible. Use words like “choose” or “select” instead of “type” or “key”. We’d rather engage users’ minds than their hands, and this also speaks more universally to users accessing the Web with touchscreens, speech-recognition software, or other user input devices.
If there are programmatic rules governing valid choices, expose these in the messages where possible. Don’t just tell someone that X is the nearest valid value, tell them that they must choose values in x increments. “Choose times in 30-minute increments from 8:00 am.”
Input Fields Placeholders
- Tell users what objects are going to be searched if possible. “Search + object” is more clear than just saying “Search”.