Inputs

Input fields collect information from users.

Specifications

  • Label Text Color:
    #464b52
    #b7b9c3
  • Input Text Color:
    #252a2e
    #ffffff
  • Placeholder Text Color:
    #b7b9c3
    #7d808d
  • Border Color:
    #e0e1e9
    #464b52
    (bottom border
    #6a6e79
    #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
ExampleHeightFont Size
Default 32px12px (.75rem)
Large 48px14px (.875rem)

Behaviors

  • Form inputs that are in focus should have a 2px bottom border using
    #217cbb
    #217cbb
    .
  • Form inputs that are valid should have a 2px bottom border using our success color
    #006638
    #1e8a44
    .
  • Form inputs that are invalid should have a 2px bottom border using our danger color
    #da212c
    #da212c
    .
  • Form inputs that are disabled should use
    #f1f1f6
    #171c1e
    as a background color.
  • Form inputs that are readonly should use
    #e0e1e9
    #353a40
    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.