Input
Entering content through a mouse or keyboard is the most basic form of input for form fields.
Anatomy
1
6
2
3
4
5
Title
Please enter content
Additional prompt, the input box wraps when the text is too long.
1: Title
Optional
2: Prefix
Optional, can switch to text, icon, or dropdown selection.
3: Reserved text
Optional, usually for input box prompts, which will be replaced by the text entered once the input box is activated.
4: Container
There must be, used for carrying the input text.
5: suffix
Optional, can switch to text, button, icon, or dropdown selection
4: Auxiliary copy
Optional, additional information for this input box.
Variant/Type
Transaction input box:
Password input box:
Multifunctional input box (default input box):
Text input field:
Selector input box:
Selector input box:
Search input box:
Date input box:
Please enter content
Please enter content
USDT
+86
Please enter content
Please enter content
Password
Please enter content
Start date
End date
Buy price
Please enter content
USDT
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
Please enter content
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
Hover
When the cursor moves over the input box, the border gradually appears.
|Please enter content
专注
This is the state when the user clicks on the input box but has not yet entered any text, showing the cursor and applying color to the border.
123456|
Active
This is the status of the user input text field. It shows a cursor and a one-click clear icon, with the cursor moving along with the text.
123456
Down
This is the status after the user input is completed and other interactions are clicked.
123456
The input box has an error; this is a description of the error's cause.
Error
This is a message indicating that the user input does not match the conditions, displaying a one-click clear icon and an error prompt. It shows a red outline. If the user continues to click this area, it will return to the active state allowing the user to continue typing.
Please enter content
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
Text
Additional prompt, the input box wraps when the text is too long.
8px
Multilingual adaptation
Title
123456
Title
1238947612834612839461829364182364812123123123331212312312364
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
123456
LTR
Title
123456
RTL
Title
123456
The input box has an error; this is a description of the error's cause.
LTR
Title
123456
The input box has an error; this is a description of the error's cause.
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.
Input box, input