Input Fields

Inputs are interactive fields that accept responses from users, commonly as part of forms. They accept many formats, but text or text area, numerical, telephone number, date, and time are most common.

These inputs are essentially the same in appearance, but the HTML syntax and formatting requirements are each slightly different.  

Field types and uses

Type

HTML syntax

Use to allow people to

Text

text

Enter, select, or search for text.

Text area

textarea

Enter longer form text that will span over multiple lines. 

Numerical 

number

Enter numbers.

Email address

email

Enter an email address.

Date

date

Enter or select a date. Uses browser default display.

Time

time

Enter or select a time. Uses browser default display.

Phone number

tel

Enter a phone number.

Input field elements

  • Label: indicate what information the field requires and display left-aligned, directly above the input field. 
  • Placeholder text: avoid using unless it’s a search field positioned directly beside a search button.
  • Helper text: provide context that helps the user complete a field. It is always available and appears underneath the field.
  • Input area: this is where users enter the information.

Helper text and placeholders 

Avoid using placeholder text whenever possible. Communicate any critical information in the field label or using helper text below the field. Never use placeholder text in lieu of a label to save space as it hides context and presents accessibility issues. 

Use helper text to provide an example, specific syntax for the input, character count, or critical information for completing the field. Try not to overuse it.

Additional guidelines for input fields

The input field width should be just slightly wider than the expected input. This provides users with a contextual clue for how long their input should be, and in the case of text, prevents it from being wrapped or hidden too soon.

Effective labels help users understand what to enter into a text field. Keep labels short and clear — aim for 1–5 words — written in sentence case. Do not include colons at the end of labels.

Be sure to include input validation as appropriate.

Relevant WCAG guidelines

Code example

See example pen by U-M Library Design System (@umlibrary-designsystem) on CodePen.