- 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
- 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
- Form inputs that are readonly should use
- 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.
Was this page helpful?
Thanks for your feedback!