Input fields
Input fields are where users enter and edit text. It is usually part of the form components.
1. How to write copy
1.1 Label
Label copy should be short. Users only scan the information.
Do
Use concise and informational language. The label should be short.
Don't
Don't write the whole sentence. If needs explanation, use helper text.
Do
Leverage prefix and suffix to give context around units.
Don't
Don't treat labels as the only place to put information.
1.2 Placeholder
Placeholder is used to reserve a space for the content. It disappears once users start to type. Do not put important information like label, format, unit, or character limit in a placeholder.
Do
Use helper text as a format hint.
Don't
Don't use placeholder as a format hint. Use helper text.
Do
Use a guiding sentence in placeholder.
Don't
Dont use example text as placeholder.
Don't
Don't use placeholder as a label. Use label.
1.3 Helper text
Helper text should add context to the input.
Do
Hint the input’s impact.
Don't
Don't put huge paragraph in helper text to explain the label. User popup.
Do
Indicate the input’s format.
Don't
Don't use long sentences. Users scan this.
2. When to hide labels
Label property is required. However, you can hide it in certain instances, such as:
- When there is a semantic prefix or suffix in the input field that indicates the usage of the input field, labels can be hidden.
- When a title in the form indicates the purpose of the input field, labels can be hidden.
- When the labels become repetitive, the repetitive ones can be hidden.
Do
Have semantic icons indicate the purpose of the input box.
Don't
Don't hide labels when the icon cannot entirely capture the purpose and context.
Do
When the title clearly indicates the purpose of the input box, label can be hidden.
Don't
Don't hide the label when the title and input field have an ambiguous relationship.
Do
When there are repetitive inputs under the same section, labels can be hidden.
Don't
Don't hide the label when the context is shift.
3. Leverage prefix and suffix
Use prefix and suffix to provide unit information. See 1.1 Label for more information.
4. When to use helper text
Use when you need to add context around input’s impact or format. See 1.3 Helper text for more information.
5. Difference between diabled and read-only
Use read-only as default to indicate a field is not editable; Use disabled when necessary.
The major difference between disabled and read-only is accessibility.
- Users with visual disabilities cannot see the input text of disabled input.
- Users who use a keyboard to navigate through the page cannot focus on disabled input.
- Users cannot copy the text in a disabled input field.
But users can do all above in a realy-only field.