Text Fields

Use text fields in forms to help people enter, select, and search for text. Text fields are normally found within a form but can also be part of a modal, search, or card. Common text input types include: usernames, descriptions, URLs, emails, addresses, and plain text searches.

Main Text Field

  1. Label: Used to give the button clarity and more meaning.
  2. Text Field: A text field with placeholder text that allows the user to enter data.
  3. Helper Text: Helper text is used to help the user enter data properly.

Behavior

Text fields can be set with a maximum character limit for constraining the amount of content that can be entered. An inline validation can also be set to alert the user and and clarify the request.

Highlighted fields

Highlighted Text Field

  1. Action buttons: You can add action buttons on inputs if you require the user to be sure of what information they are entering within an input.
  2. Blue Highlight: Highlighted text fields are used to indicate what field is being focused. Use “Water Blue” from the color palette for all text/button highlights.

Required fields

Required Text Field

  1. Label With Asterisk: A red asterisk can be added to the label to display that the text field is required to have valid information before continuing.

A required text field is used to specify that the input element must be filled out before submitting the input or form. This attribute works with other types of input like radio, checkbox, number, text, etc...

Required Text Field

  1. Red Highlight: When a user submits a Form with a required input with a blank field or incorrect data, use a red border to indicate which field the user needs to properly fill.
  2. Error Helper Text: Error helper text can be used to explain what the error is on the text field.

Error helper text can be used to inform the user that the required field has not been filled out correctly. Use “Panic red” from the color palette for error helper text.


Text area fields

Text area fields are used for entering long pieces of information and comments. The width can be adjusted to match the width of the container it’s being used in.

Minimum height text area

Minimum height text area

  1. Label: Use a label to give the text area clarity for the user to enter in large pieces of information.

  2. Text Area: Text area defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width. We recommend a minimum height of 100px for text area inputs.

Maximum height text area

Maximum height text area

  1. Label: Use a label to give the text area clarity for the user to enter in large pieces of information.

  2. Text Area: When a user types a bulk amount of information, we recommend having a max height of 250px. If there's addition text that is more than 250px tall, use a scroll bar within the input.