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 value, 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

Password validation

The password requirements are a special kind of live hint. The requirements are displayed semibold and will turn to regular when the user fulfilled that requirement. Simultaneously the gray separator will turn green with every step (fulfilled requirement).

Password requirements

Password requirements success

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.