Text Input Fields
A text input field is any field in the UI that a user can click into to enter text.
-
Put a clear label above all text fields.
For example, if a user needs to enter a database name, put a label of Database Name on the text field.
-
Keep the Instruction Text, or any elaboration on what the user should input in the text field, below the field, not inside.
For example, put any text about special character limitations or whether the value can be changed later below the text field.
-
Put a character limit counter at the bottom-right of the text field, outside the field itself, to indicate a character limit.
-
Add useful hint text to show how a user should be inputting a value inside the text field. Have it disappear on its own when the user goes to type in the field.
For example, put an example database name inside the Database Name text field to show the user an example of what value they can enter.
