Input
Basic form components, with functional extensions built on native controls, can be used in combination. The Input field is divided into three types: Input field, Compound Input field, and TextArea.
Anatomy
Title
Please enter content
Text
Additional prompt, the input box wraps when the text is too long.
1
6
2
3
4
5
1: Title
Optional
2: Prefix
Optional, can switch to text, icon, or dropdown selection.
3: Reserved text
Required, usually placeholder text in an input field, which will be replaced by the typed text once the input is active.
4: Container
There must be, used for carrying the input text.
5: suffix
Optional, can switch to text, icon, or dropdown selection.
4: Auxiliary copy
Optional, additional information for this input box.
Variant/Type
Please enter content
Please enter content
Please enter content
+86
Please enter content
+86
Please enter content
Please enter content
Transaction input box:
Password input box:
Multifunctional input box (default input box):
Text input field:
Selector input box:
Selector input box:
Multi-purpose input box:
In addition to the main typical variants mentioned above, the Figma properties of the multifunctional input box can be utilized to control the desired forms, such as [prefix icon + suffix text] or [prefix text + suffix dropdown], etc.
Usage scenario
Address
Quantity
All
Quantity
Quantity
Supplement
In most cases, the input box is placed horizontally across, while on the transaction page, it is placed on the left/right depending on the width of the container.
Interaction
Please enter content
Default
At this point, the input field is in an inactive state and has not interacted with the user. If the area is selected, the state changes to focused.
|Please enter content
专注
This is the state when the user has clicked on the input field but has not yet entered any text, showing the cursor and the border.
123456|
Active
This is the state of the user input text field. It displays the cursor, the one-click clear icon, and a border.
123456
Down
This is the status after the user input is completed and other interactions are clicked.
123456
Additional prompt, the input box wraps when the text is too long.
Error
This shows the one-click clear icon and the error prompt text when the user input does not match the conditions, along with a red border. If the user clicks this area again, it will return to the Active state, allowing the user to continue inputting.
123456
Disable
For some reason, the user is unable to input. Although the entered details exist in the field, they will show dimmed afterwards. Even when selecting that area, it will not gain focus.
Label
8px
12px
8px
Title
Please enter content
Additional prompt, the input box wraps when the text is too long.
12px
Multilingual adaptation
kasndfasdiufeabsdf8asdjkfhhiuosdaaskdf
Quantity
All
1238947612834612839461829364182364812123123123364
All
Fit to content
For example, with the withdrawal address input field, you can set the height of the input field to fit the content, thereby ensuring that the end of the address is always visible.
Decrease font size + truncate
In most input boxes, when the content is too long, the font size is reduced to a minimum of 10px. If it is still too long, it will be truncated with... at the end.
RTL
Title
Please enter content
LTR
Title
|654321
RTL
123456
Additional prompt, the input box wraps when the text is too long.
LTR
654321
Additional prompt, the input box wraps when the text is too long.
RTL
Usage
Title*
Please enter content
Do
Title (required)
Please enter content
Caution
When requesting information from users, mandatory fields that must be filled out can be marked with a red * symbol displayed to the right of the label. Use caution when informing users that certain information is "required." If the amount of text increases, users may find the form complicated and difficult to fill out.
Enter mobile number
Do
+86
Enter mobile number
Don't
The default country is not displayed in the phone number input box.
Do
123456|
Don't
When entering sensitive personal information (such as passwords or card numbers), the default hidden feature makes the input of sensitive user information like passwords invisible.
New nickname
For example: flying penguin
Do
New nickname
New nickname
Don't
Do not use the reserved copy content in the title.