Validation

Validation component is used to display informative validation messages inside cells and below inputs. It always inherits its container width. It does not have any background color and inherits it from parent container.

Additionally, validation does not have any spacings, so its position solely depends on context.

Your email address has not been confirmed yet.

Themes

Based on context and state, validation may have a different theme that defines text color.

By entering a promo code you can get up to 50% OFF your purchase.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Entered passwords match.
Please enter a valid email address.
Lorem ipsum dolor sit amet, consectetur adipiscing elit

Specifications

$validation-text-type:              'caption';

$validation-primary-text-theme:     'primary';
$validation-amplified-text-theme:   'amplified';
$validation-muted-text-theme:       'muted';
$validation-success-text-theme:     'success';
$validation-warning-text-theme:     'warning';
$validation-inverse-text-theme:     'inverse';

API

name type default
content String (none)
theme primary / amplified / muted /success / warning / inverse (none)