Raised Input Fields
UI Components

Fields State

Inline Status Messages

Redlines

Input Fields Properties

Redlines

Implementation Examples

Redlines

Raised Input Field Properties

Regular
Bottom Line
Thickness: 1px
Color: 65% Dim Gray
Label Text
Style: Body 16px
Color: 55% Black
Spacing: 16px right padding
Hover
Bottom Line
Thickness: 1px
Color: Dim Gray
Label Text
Style: Body 16px
Color: 55% Black
Spacing: 16px right padding
Focus
Bottom Line
Thickness: 1px
Color: Brand Blue
Label Text
Style: Body 16px
Color: 55% Black
Spacing: 16px right padding
Input Text
Style: Body 16px
Color: Black
Spacing: 8px bottom padding, 8px top padding
Filled
Bottom Line
Thickness: 1px
Color: 65% Dim Gray
Label Text
Style: Body 16px
Color: 55% Black
Spacing: 16px right padding
Input Text
Style: Body 16px
Color: Black
Spacing: 8px bottom padding, 8px top padding
Disabled
Bottom Line
Thickness: 1px
Color: 20% Black
Label Text
Style: Body 16px
Color: 20% Black
Spacing: 16px right padding
Error
Bottom Line
Thickness: 1px
Color: Crimson Negative
Label Text
Style: Body 16px
Color: 55% Black
Spacing: 16px right padding
Input Text
Style: Body 16px
Color: Black
Spacing: 8px bottom padding, 8px top padding
Tip Text
Style: Meta Content 14px
Color: Dim Gray
Color: 8px top padding
Icon
Color: Crimson Negative
Warning
Bottom Line
Thickness: 1px
Color: Amber
Label Text
Style: Body 16px
Color: 55% Black
Color: 16px right padding
Input Text
Style: Body 16px
Color: Black
Spacing: 8px bottom padding, 8px top padding
Tip Text
Style: Meta Content 14px
Color: Dim Gray
Spacing: 8px top padding
Icon
Color: Amber
Approved
Bottom Line
Thickness: 1px
Color: Dim Gray
Label Text
Style: Body 16px
Color: 55% Black
Spacing: 16px right padding
Input Text
Style: Body 16px
Color: Black
Spacing: 8px bottom padding, 8px top padding
Tip Text
Style: Meta Content 14px
Color: Dim Gray
Spacing: 8px top padding
Icon
Color: Green Positive
Valid
Bottom Line
Thickness: 1px
Color: Dim Gray
Label Text
Style: Body 16px
Color: 55% Black
Color: 16px right padding
Input Text
Style: Body 16px
Color: Black
Spacing: 8px bottom padding, 8px top padding
Tip Text
Style: Meta Content 14px
Color: Dim Gray
Spacing: 8px top padding
Icon
Color: Green Positive