Anatomy
|
Item |
Element |
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 |
Tooltip info |
Provides non-essential additional information to help the user enter correct data. |
Yes |
|
|
4 |
Container |
The interactive area for the user to input the data. The content of the container is specific to each component. |
|
|
|
5 |
Placeholder text |
Provides examples of data or required content format. |
|
Yes |
|
6 |
Inline error icon |
Indicates error when a Field is set to Inline property. |
|
|
|
7 |
Helper Message |
Provides additional information to help the user enter correct data, e.g., required password format. |
|
Yes |
|
8 |
Error Message |
Indicates error and explains how to fix it. |
|
|
|
9 |
Character counter |
Indicates the ratio between characters entered and the set limit. |
|
Yes |
Specification
States
|
Item |
State |
Description |
|---|---|---|
|
1 |
Default |
A default resting state when a user does not interact with it. |
|
2 |
Hover |
The user is hovering over the input with the mouse. |
|
3 |
Focus |
User used tab to identify the input or clicked on it. |
|
4 |
Active |
The user is actively entering data into the field |
|
5 |
Error |
The entered data is invalid, or a required text input has not been filled in. The user needs to edit the content to submit or save the data. |
|
6 |
Character limit exceeded error |
The entered data exceeds the maximum number of characters allowed. The user needs to edit the content to be able to submit or save the data. |
|
7 |
Disabled |
When another field needs to be filled first because there is logic between them, e.g., the end date cannot be entered before the start date is filled in. |
|
8 |
Read-only |
The user is not allowed to edit the data in the form, e.g., they don’t have the rights, or the data comes from a third-party tool. |
Sizing
Fields are available in four sizes: small, medium, large, and extra-large. Please refer to the Usage tab for guidelines on when to use each size.
|
Element |
Property |
Value |
Token |
|---|---|---|---|
|
Container: small |
height |
32px |
sizing.400 |
|
Container: medium |
height |
40px |
sizing.500 |
|
Container: large |
height |
48px |
sizing.600 |
|
Container: extra large |
height |
56px |
sizing.700 |
Spacing
|
Element |
Property |
Value |
Token |
|---|---|---|---|
|
Container: small, medium |
margin-top, margin- bottom |
4px |
spacing.50 |
|
Container: large, extra large |
margin-top, margin-bottom |
8px |
spacing.100 |
|
Help Icon Button |
size |
24px×24px |
size: small |
|
|
margin-left |
16px |
spacing.200 |
|
Error message |
margin-top |
4px |
spacing.50 |
|
Error Icon |
size |
16px×16px |
size: small |
|
|
margin-right |
8px |
spacing.100 |
|
Character counter |
margin-left |
16px |
spacing.200 |