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.

Beyond fields, we have reusable designs for the following additional input controls: checkbox, file upload, radio button, range, select, and search.

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.