The validation is a visual hint for users to make sure inputs are valid. There are two types of validations:

  • validation of an input field: Validates the input of a single input field. See usage and styling in section input field validation.
  • page specific error validation: Only use this kind of validation for a whole section, whole view and errors which occur when sending data. See usage and styling in section page specific error validation.

Input field validation

Input field validation example

Once the input in a field is changed to a valid form, the validation hint turns green.


Input field validation styleguide elements

Validation field

border: 1px solid $gray-300
border-bottom-radius: 3px
background-color: $gray-100
padding-top: 8px
padding-bottom: 8px
padding-left: 12px
padding-right: 12px

Validation indicator red

height: 2px
background-color: $red-500
Input field validation styleguide elements

Validation text

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-700

Validation indicator green

height: 2px
background-color: $green-500

Page specific error validation

This validation concerns a whole section, form or even a whole view.

Page specific validation example


Page specific validation styleguide
x: 8px
y: 16px

See more information about the styling and position of this component in the warning styleguide.