Skip to main content

Placeholders

Ask AIView as Markdown
Copy a prompt to ask an AI assistant about this page.

Placeholders offer a hint or example of the expected input, but they disappear once a user starts typing. They should never replace a label as users lose that guidance the moment they need it most.

Use placeholder text in search fields. See Search and filter.

UI example showing a search field with the placeholder text Search assets….

  • Placeholder text: Search assets…

Use placeholder text within text area / input fields to provide short examples and obvious hints.

  • Form field label: Asset name
    Placeholder text: Enter asset name, e.g. pump-A-097

Provide helpful or precise format examples as placeholder texts when localization, helper texts or tooltips are not possible or available. See Helper / info text.

UI example showing field label Date with the placeholder text YYYY/MM/DD.

  • YYYY/MM/DD
  • +1 (555) 123-4567
  • name@company.com
  • 123-45-6789
  • 14:00 (24-hour clock)
  • EQ-2024-00123
  • Date
  • Phone number
  • Email
  • ID number
  • Time
  • Equipment ID

Add helpful examples within text areas for comments or notes. See Textarea (component).

UI example showing field label Comments with the placeholder text Share any details that might help, e.g. "The issue occurs when…".

  • Field label: Comments
    Placeholder text: Share any details that might help, e.g. "The issue occurs when…"
  • Field label: Comments
    Placeholder text: Write your comments here…

Never use placeholder texts instead of field labels as they are not reliably accessible and disappear on input.

  • Field label: (empty)
    Placeholder text: Enter phone number
  • Field label: (empty)
    Placeholder text: Enter email address

Never add critical information or instructions as placeholder text.

  • Field label: Password*
    Placeholder text: Minimum 8 characters with at least one number.
  • Field label: Upload certificate*
    Placeholder text: PDF only. Max 5MB. Must be valid for at least 90 days.

Dos and Don'ts​

  • Do add extra, useful information for users in placeholders if helper text is not possible
  • Do always have a label alongside placeholder text
  • Don't ever use placeholder text as form field or text area labels
  • Don't repeat exact label text and placeholder text