Anatomy
|
Item |
Name |
Description |
Component |
Optional? |
|---|---|---|---|---|
|
1 |
Label |
Indicates to the user what content they need to enter in the field. |
|
|
|
2 |
Required marker |
Indicates that entering data is required to move further in the flow. |
|
Yes |
|
3 |
Input container |
The container in which the user enters the data. |
|
|
|
4 |
Tooltip info |
Provides non-essential additional information to help the user enter correct data. |
Yes |
|
|
5 |
Indicative Icon |
Decorative static icon indicating the field’s purpose. |
Yes |
|
|
6 |
Prefix |
A non-editable text used for units or repeated part of the content. |
|
Yes |
|
7 |
Placeholder |
Provides examples of data or required content format. |
|
Yes |
|
8 |
Suffix |
A non-editable text used for units or repeated part of the content. |
|
Yes |
|
9 |
Interactive icon |
Button that enables additional actions associated with the field. |
Yes |
|
|
10 |
Helper message |
Provides additional information to help the user enter correct data, e.g., required password format. |
|
Yes |
|
11
|
Character counter |
Indicates the ratio between characters entered and the set limit. |
|
Yes |
Specification and properties
States and sizing
Spacing
|
Element |
Property |
Value |
Token |
|---|---|---|---|
|
Input container: small |
padding-left, padding-right |
8px |
spacing.100 |
|
Input container: medium |
padding-left, padding-right |
12px |
spacing.150 |
|
Input container: large, extra large |
padding-left, padding-right |
16px |
spacing.200 |
|
Indicative Icon |
size |
16px×16px |
size: small |
|
|
margin-right |
8px |
spacing.100 |
|
Prefix |
margin-right |
4px |
spacing.50 |
|
Suffix |
margin-left |
4px |
spacing.50 |
|
Actionable Icon |
size |
16px×16px |
size: small |
|
|
margin-left |
8px |
spacing.100 |