Overview

Input fields or text fields allow users to enter text into a UI. They typically appear in forms, often with checkboxes , radio buttons , and buttons . The user input is most often sent to a server for processing.

visibility
search

Usage

Use when

  • Gathering and validating user data.

Specifications

  • Label Text Color: #464b52
  • Input Text Color: #252a2e
  • Placeholder Text Color: #B7b9c3
  • Border Color: #e0e1e9 (bottom border #6a6e79 )

There are two sizes of input fields defined:

  • Default: default form inputs should have a height of 32px (8px padding) and a font-size of 12px (.75rem). Used for most forms.
  • Large: larger variant should have a height of 48px (16px padding) and a font-size of 14px (.875rem). Used for forms in in-cab applications
Example Height Font Size
Default 32px 12px (.75rem)
Large 48px 14px (.875rem)

Behaviors

  • Form inputs that are in focus should have a 2px bottom border using our active color #0C77BE .
  • Form inputs that are valid should have a 2px bottom border using our success color #006638 .
  • Form inputs that are invalid should have a 2px bottom border using our danger color #da212c .
  • Form inputs that are disabled should use our Gray Light color #f1f1f6 as a background color
Helper Text
Valid Feedback
Invalid Feedback

Editorial

  • When possible, add helper text below an input to further clarify selections or validation errors.
  • Always mark required fields with an * .
  • Provide input constraints, such as a character limit within a text entry box, to provide users with guidelines and improve form efficiency.
  • Use multi-step forms when necessary by breaking up inputs into distinct categories.
  • Provide clear and obvious action buttons. Form submission buttons should be primary.

Accessibility

  • Always use a label. Use a hidden label, or a title or aria-label attribute when a visible text label is not needed.
  • Associate form labels with controls.
  • Never replace label with placeholder text.
  • Always specify the correct input type (e.g. date, email, tel, number)
  • Match for and id values that associate the label with its form control. Because id attribute values must be unique on each page, a form control can only have one associated label.
  • Whenever possible use autocomplete to help users (especially users with cognitive disabilities) fill out the form.
  • On required fields, use the required attribute. It will cause screen readers to announce “required” and also triggers the browser to warn the user with a visual tooltip if the user leaves the filed blank. Screen readers also announce the tooltip content with it appears.
  • When performing form validation, apply the aria-invalid="true" attribute to a form control. It will cause the screen reader to announce “invalid” when that control gets the focus.
  • Use aria-labelledby to overcome the 1:1 limitations of label.
  • Use aria-describedby (in addition to a label) to associate descriptive text to the form control.
  • Make sure the form is keyboard accessible: all input fields need to be focusable. The “Tab” sequence needs to be logical and intuitive.
  • Do not rely on JavaScript alone for form submission, validation, and error recovery.
  • Alert the user of any validation errors in an apparent and accessible manner. Provide informative feedback messages.
  • Allow the user to easily access the form controls that need to be modified.
  • Allow resubmission and revalidation of the form information.
What's Changed
Date Version Notes Contributors
11/23/2020 1.0.0 Formatting adjusted to be accessible. E. Bohn, L. Kause, N. Springer