Skip to main content

Inputs

Input fields collect information from users.

Specifications

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 (8px padding) and a font-size of 14px (.875rem). Used for forms in in-cab applications
Example
Default
Large

Behaviors

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.

Colors

Element Property Color
Label Text
#464b52
#b7b9c3
Input Text
#464b52
#ffffff
Placeholder
#b7b9c3
#7d808d
Background
#ffffff
#171c1e
Border
#e0e1e9
#464b52
Border (Bottom 2px)
#6a6e79
#6a6e79
Input (Focus) Border (Bottom 2px)
#217cbb
#019aeb
Input (Valid) Border (Bottom 2px)
#006638
#1e8a44
Input (Invalid) Border (Bottom 2px)
#da212c
#da212c
Input (Disabled) Background (40% opacity)
#f1f1f6
#171c1e
Input (Readonly) Background
#e0e1e9
#353a40