General
Placeholder texts
Placeholder texts
Placeholder texts use a single sentence to guide the user on how to interact with a form field before any value is entered. This pattern is commonly found in components like Search and Select fields.
General
Avoid custom placeholder text. The user should intuitively know what information to enter.
Do ✅ | Don't ❌ |
---|---|
|
|
Don't include redundant words.
Do ✅ | Don't ❌ |
---|---|
|
|
Write at most 36 characters.
Do ✅ | Don't ❌ |
---|---|
Search by name, ID, or ref ID | Search by name, category, description, ID, or ref ID |
Specific
When writing the placeholder text of a Select field, include an ellipsis at the end.
Do ✅ | Don't ❌ |
---|---|
Select… | Select |