Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
  • Navigation
  • Display
  • Forms
    • Form controls
      • Guidelines
    • Form layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
    • Search and filter controls
    • Date and time controls
    • Other controls
  • Tabular content
  • Templates
  • Editors and syntax
  • EUI
  • Forms
  • Form controls
  • Guidelines

Form controls guidelines


Labels

Avoid long labels, but don't sacrifice clarity. If needed, put additional information in help text and tooltips.

Use the `major.minor` format. You can use wildcards `*` to span over multiple versions.

Do: Say what the field is in the label. Use help text for additional information.

Don't: Put everything in the label. It's hard to scan.

Hint text

Place hints and instructions outside a text field so it is always visible to the user. Keep the hint text short, maximum two sentences long. Use hint text to:

  • Explain why you are asking a certain question: "We will only email you if there is a problem with your order."
  • Provide clarifying details on what to type: "Enter the full 32-character ID."
  • Tell the user where to find the information you're asking for: "Find the Elasticsearch cluster ID on the main administration page of your deployment."
Use shorthand notation, such as 30s, 10m, or 1h.

Do: Help users make the right decision by clarifying what goes inside a field.

This is the name that will be visible to other users.

Do: Use complete sentences and ending punctuation.

Placeholder text

In fields

Use the placeholder property to describe the expected value of the input or to provide a useful example.

Include the international call prefix.

Do: Provide a simple example that highlights the expected syntax or value.

Include the port number.

Don't: Start with `for example`, or `e.g.`.

Add placeholder text in addition to field labels and help text, not as a replacement. Omit it if it doesn't add value for users. And keep it short.

Enter a valid IP address.

Do: Place info essential to completing the form outside the field so that it is always visible.

Enter CIDR or IP address. For example, `192.168.132.6/22`.

Don't: Use text that adds no value, such as “Type here”.

Do: When space is limited and the UI is very simple, you can use field labels as placeholder text. This must stay an exception.

Do: If space allows it, prefer following the rule described earlier with labels outside of the fields.

In search bars

In a search bar, be specific about what users can enter.

Do: Give users a hint at things they might want to search for. State the action the user performs (find, search) instead of the field functionality (jump to).

Don't: Use an ellipsis.

Edit this page

Previous
Tour
Next
Guidelines
  • Labels
  • Hint text
  • Placeholder text
    • In fields
    • In search bars
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic