Inputs

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.

Usage #

Use when

• Gathering and validating user data.

Specifications #

• Label Text Color: #6A6976
• Input Text Color: #363545
• Placeholder Text Color: #D0D0D7
• Border Color: #EAEAEF (bottom border #8C8B96 )

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

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 #4A821F .
• Form inputs that are invalid should have a 2px bottom border using our danger color #C81922 .
• Form inputs that are disabled should use our Gray Light color #F3F3F7 as a background color

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. 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