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
|
| |
Colors
| Element | Property | Color |
|---|---|---|
| Label | Text |
#464b52
#b7b9c3
|
| Input | Text |
#464b52
#ffffff
|
| Placeholder |
#b7b9c3
#7d808d
| |
| Background |
#ffffff
#171c1e
| |
| Border |
#e0e1e9
#464b52
| |
| Border |
#6a6e79
#6a6e79
| |
| Input (Focus) | Border |
#217cbb
#019aeb
|
| Input (Valid) | Border |
#006638
#1e8a44
|
| Input (Invalid) | Border |
#da212c
#da212c
|
| Input (Disabled) | Background (40% opacity) |
#f1f1f6
#171c1e
|
| Input (Readonly) | Background |
#e0e1e9
#353a40
|
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.