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.
- Gathering and validating user data.
- Label Text Color:
- Input Text Color:
- Placeholder Text Color:
- Border Color:
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
- Form inputs that are in focus should have a 2px bottom border using our active color
- Form inputs that are valid should have a 2px bottom border using our success color
- Form inputs that are invalid should have a 2px bottom border using our danger color
- Form inputs that are disabled should use our Gray Light color
#f1f1f6as a background color
- 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.
- Always use a
label. Use a hidden
label, or a
aria-labelattribute when a visible text label is not needed.
- Associate form labels with controls.
- Never replace
- Always specify the correct input type (e.g.
idvalues that associate the label with its form control. Because
idattribute values must be unique on each page, a form control can only have one associated
- Whenever possible use
autocompleteto help users (especially users with cognitive disabilities) fill out the form.
- On required fields, use the
requiredattribute. 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.
aria-labelledbyto overcome the 1:1 limitations of
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.
- 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.
|11/23/2020||1.0.0||Formatting adjusted to be accessible.||E. Bohn, L. Kause, N. Springer|