Components

Input

Input is a themed version of the native form field that enables a user to interact and input data.

Input fields allow users to enter and interact with data. Often used with form layout, but can exist outside of a standard form.

Common input field anatomy includes:

  • Label: Description of text field.
  • Type: Type of the field to render e.g., “text, number, password, email.”
  • Help Text: Context to what the user should do with text field.
  • Placeholder Text: Example text within the text field.
  • Input Field: Contain to accept text, numbers, or combination of both.

Examples

Default Input Field Anatomy

Default Input Field Anatomy

Best Practices

Input fields should:

  • Use a label that is meaningful, clear, and concise.
  • Use basic help text, do not hide it.
  • Use placeholder text that’s formatted as an example, not as a label.
  • Use sentence case and avoid all uppercase.
  • Use the proper input length as an affordance to how much content can be entered.
  • Use inline validation.
  • Use the proper input type in HTML based on the data being collected. e.g., type='email' for email, type='number' for numeric values, type='text' for general text.

Optional text should:

  • Be after label
  • Be lower case
  • Be contained in parenthesis

Optional input field

Help Text example

Help text example

Placeholder Text

Placeholder text appears inside of an input field. This text can serve as an example of what the user could enter. When a user enters data into an input field the placeholder text should disappear. Placeholder text is not accessible to all users and should not be used to provide instruction or be required to use an input field.

Placeholder text should:

  • Be used only for supplemental information
  • Be written as examples, not instructions
  • Be short and concise
  • Be written in plain language

Placeholder text

Input

The input allows users to enter text, numbers, or a combination of both as information to submit.

Inputs should:

  • Be the proper length for the amount of content that can be entered
  • Be a consistent vertical height

Input field length

Character count

Validation and Errors

Validation and errors help the user understand what is incorrect in an input field. Validation should happen after the user fills out the field.

  • Be clear and explain what is incorrect and how to fix it
  • Be short and concise, single sentence
  • Be sentence case
  • Be written in plain language
  • Be obvious, with use of color or iconography

Input error