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 |
Placeholder |
Provides examples of data or required content format. |
|
Yes |
|
6 |
Helper message |
Provides additional information to help the user enter correct data, e.g., required password format. |
|
Yes |
|
7
|
Chip |
Entered text strings are converted into chips for easy editing. |
|
Specification and properties
States
Sizing
When Chips do not fit the container, they are displayed in multiple rows. The height of the Chip Input adjusts to display all of them without the need to scroll.
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 |
|
Chip |
margin-right |
4px |
spacing.50 |