The ArkUI TextInput component provides components for login scenarios, while Password Vault integrates functions such as autofill. You only need to use standard ArkUI components in the UI to implement convenient login for users via Password Vault.
Constraints
To implement the password autofill service, you must use the ArkUI TextInput component to implement the input box and specify the input box type (InputType). The following table describes the input box types and when to use them.
Table1 Description of input box types
| InputType | Description | Scenario |
|---|---|---|
| USER_NAME | Username input mode. | Used for the user to enter the username in scenarios such as login and registration. |
| Password | Password input mode. This input box allows only digits, letters, underscores (_), spaces, and special characters. An eye icon is used to show or hide the password, and the password is hidden behind dots by default. | Used for the user to enter the password in scenarios such as login and registration. |
| NUMBER_PASSWORD | Numeric password input mode. Only numbers are allowed. An eye icon is used to show or hide the password, and the password is hidden behind dots by default. | Used for the user to enter the password in scenarios such as login and registration. |
| NEW_PASSWORD | New password input mode. | Used for the user to enter the new password in scenarios such as registration and password change. |
The Password type mentioned in this topic can be replaced with the NUMBER_PASSWORD type.
Quick Adaptation Guide
To use autosave and autofill on the username and password login page, set type of the TextInput component to InputType.USER_NAME for username input and to InputType.Password for password input.
To use strong password autofill on the account and password registration page, set type of the TextInput component to InputType.NEW_PASSWORD. If the application has special requirements on the password strength, see Suggestions on Automatically Generating Strong Passwords for Applications.
Example:
TextInput({ placeholder: 'Username' })
.opacity(0.6)
.type(InputType.USER_NAME)
.placeholderColor(0x182431)
.width('100%')
.placeholderFont({ size: 16, weight: FontWeight.Regular })
.margin({ top: 32, bottom: 8 })