Specifications
- Label Text Color:
#353a40#b7b9c3
- Input Text Color:
#353a40#ffffff
- Placeholder Text Color:
#90939f#7d808d
- Border Color:
#353a40#6a6e79
- Focus:
#019aeb#019aeb
- Active:
#217cbb#217cbb
- Always have a label next to the text field, either above, on the left side or login in the input.
- Label text should always be visible.
- Display the validation state clearly. The validation message will replace Helper Text
- Try to make Label text concise. Where it must be longer (due to language translation), the label text can wrap to a second line. Truncate label at end of second line if absolutely necessary.
- Don’t add validation text under helper text, as their appearance will shift content.
Behavior
- Form inputs that are in Active should have a 2dp border using our active color:
#217cbb#217cbb
- Form inputs that are in Focus should have a 2dp border using our focus color:
#353a40#6a6e79
- Form inputs that are invalid should have a 2dp border using our danger color:
#da212c#da212c
- Form inputs that are disabled should be 40% opacity.
- Form inputs that are read only have background color:
#e0e1e9#171c1e
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.
Was this page helpful?
Thanks for your feedback!