Password input
An input that securely masks user-entered passwords, ensuring privacy. It typically includes an option to toggle password visibility.
- Password field label.
- Default placeholder: “Enter password”.
- Show/Hide icon:
eye-show: Show passwordeye-hide: Hide password
Show/Hide icon trigger area
- Increase the trigger area to match the input field's height proportionally, providing sufficient space for users to click on the Show/Hide icon.
- If the password is hidden, show a tooltip with the text "Show password" when the user hovers over the trigger area.
- If the password is visible, show a tooltip with the text "Hide password" when the user hovers over the trigger area.
State
-
Default: Password hidden
-
Default Focused: The user clicks on or tabs into the textfield, indicating that it is active and ready to receive input.
-
Filled: Occurs when a user has entered password into the textfield, indicating that the field contains input.
3a. Eye-show trailing icon: Click to show password
-
Filled: Password visible
4a. Eye-hide trailing icon: Click to hide password
-
Error: otl-danger-300 outline and show error hint text when password input is empty.
-
Error Focused: The user clicks on or tabs into the textfield, indicating that it is active and ready to receive input.
Size
Each size is designed to cater to different form needs, ensuring optimal readability and user experience.
