Validate input

pattern validation page specific errors


The validation is a visual hint for users to make sure inputs are valid.

There are two types of validations:

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

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 text

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

Validation indicator red

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

Validation indicator green

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

Page specific error validation

Page specific validation example

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


Page specific validation styleguide

y: 16px

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


The validation is not animated.