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

To keep in mind

  • Provide a descriptive label that conveys the purpose of the field.
  • 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.

General guidelines