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 (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
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 |
#f1f1f6 #171c1e |
Input (Readonly) | Background |
#e0e1e9 #353a40 |
Was this page helpful?
Thanks for your feedback!