Also known as:
InputForm fieldText inputEmail inputPassword

Text Field

A text field includes a label and an input field you can type text into.

AnchorNeed to know

  • Pre-fill the Text Field input with good defaults wherever possible.

Visuals

UI Kit

Copy guidelines

To be scannable and fully helpful, a text field must have an associated label and must contain an example of the text you wish the user to input. Here’s what you should know:

Give it a clear, short label

Make sure your text field has a short, descriptive label above it that describes what the user should type into the box below. Avoid phrasing your labels as questions. Keep in mind that your label shouldn’t contain instructions. Reserve those for the helper text.

Do:
  • Do
    Email address
Don't:
  • Don't
    Enter your email address here

Placeholder text should be examples and not instructions

Make sure that any text inside the field box serves as an example of what the user should type into the box. Don’t put any instructions inside the box.

Don't:
  • Don't
    Enter your email address here

Keep in mind that examples aren’t always required. For example, a text field asking for someone’s first name doesn’t need an example like “e.g. Bob” in it. Only use placeholder text when required. More often than not, blank text fields are easier to spot and scan.

Error text should be succinct

Keep all error text short, useful and to the point.

Do:
  • Do
    Dates needs to be MM/DD/YYYY
Don't:
  • Don't
    You entered an invalid date format

Helper text should provide extra guidance

Helper text placed below the field can include further instructions or information on how to fill out the text field. It can also include details on what will happen with the filled out information. Don’t put placeholders here.

Do:
  • Do
    Your email address will be used to send you survey notifications and reports
Don't:

Write in sentence case with minimal punctuation

All text field copy should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name. Always err on the side of minimal punctuation, so leave out full stops and commas where possible.

To keep in mind

  • Most of the time, we validate text fields on “blur” (when leaving the text fields) or on form submission as needed. We don’t validate on key strokes.
  • As a rule of thumb, generally use “ (optional)” to indicate optional fields instead of “*” to indicate required fields.
  • Consider if a more specific type is needed as an email type for email addresses.
  • When displaying a validation messages, such as an error, use a aria-describedby attribute to associate the text field with the element containing the validation message.
  • Pre-fill the Text Field input with good defaults wherever possible.
  • Disabled state:

When to use and when not to use

When to use
  • Use Text Fields to gather text input.
When not to use
  • Avoid gathering input from users that isn't absolutely necessary.

External links

Here are some examples from elsewhere: