Password input used in Ottilia
|
Component |
Usage |
User action |
|---|---|---|
|
Password Input |
Form element to be used when asking for a password to access a product or service |
In order to proceed to the next stage, or to access certain documents, or space the user will be asked for access credentials |
Anatomy
Structure
|
|
|
|
|
label |
Indicates the name of the information asked to the user. |
|
text placeholder |
The inner text should display a short instruction to the user. |
|
show/hide password |
When pressed, reveals the user input. |
|
reset password |
The link that sends the user to the 'reset password' flow. (Shown in the login flow) |
|
password requirements
|
Contains all the requirements asked when creating a password (Shown in the signup flow). This requirement is the responsibility of the product, as well as its validation. requirements have 3 validation status colour, default, accepted, and rejected (as seen in the image) |
Sizes and spaces
|
The password input comes in two sizes, m and l |
|
Password inputs have a minimum width of 175px, and they should work alongside with the grid system that is implemented. |
|
|
Properties
|
Property |
Values |
|---|---|
|
Size |
medium large |
|
State |
default hover disabled active error |
|
Filled |
true false |
Behaviour
Interaction
Show/Hide password
Hide Show property
Password requirements
Hide Show property
Responsiveness
Max-width on each breakpoint
Find below our suggestion of widths for the password input component.
|
Component |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|---|---|---|---|---|---|
|
Password input |
4 cols |
4 cols |
3 to 4 cols |
2 to 3 cols |
4 to 6 cols |