Placeholder texts
1 min read
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 ❌ |
|---|---|
| Search | Search by name |
| Select… | Select an option... |
Don't include redundant words.
| Do ✅ | Don't ❌ |
|---|---|
| • Page title: Products Field placeholder: Search by category or ID | • Page title: Products Field placeholder: Search by product category or product ID |
| • Field label: Category Field placeholder: Select… | • Field label: Category Field placeholder: Select a category… |
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 |