Also known as:
InputForm fieldText inputEmail inputPassword

Text Field

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

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 of 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 field with good defaults wherever possible.

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