Menu
Feedback
Guides
Interface copy
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 ❌
  • Search
  • Select…
  • Search by name
  • Select an option...

Don't include redundant words.

Do ✅Don't ❌
  • Page title: Products

    Field placeholder: Search by category or ID

  • Field label: Category

    Field placeholder: Select…

  • Page title: Products

    Field placeholder: Search by product category or product ID

  • Field label: Category

    Field placeholder: Select a category…

Write at most 36 characters.

Do ✅Don't ❌
Search by name, ID, or ref IDSearch 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
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Messages
« Previous
Titles
Next »
Contributors
1
Photo of the contributor
+ 1 contributors
On this page
GithubCommunityFeedback