States
|
|
Active The input is available. |
Disable The input is unavailable. You can’t fill information. |
|
Default It’s the input default status. It’s not selected. It can be empty or filled. |
|
|
|
Hovered When user hover the input. |
|
|
|
Selected The user can enter content in the input. |
|
|
|
Error The input contains errors. |
|
|
|
Warning The content of the input generates changes that can have an impact on the rest of the experience
Warning message is mandatory and have to explain why the input at this status. |
|
|
Variants
Compact text input
Compact text input is the same component than default text input. As a result, they have the same behaviors and status.
The only difference between compact and default text input is the presence of "Label".
Compact text input doesn't have "Label".
Actionable icons
Text input can contain one or two icons enabling actions to be taken on its own content.
When use them?
|
Show/Hide action |
Clear action |
|
To show or hide the content of an input. Use for: password, security codes or datas. |
To quickly erase the content of an input. Use for: research, multiple data entry, autocomplete, regularly modified data and data known to be long (such as address, password), content of more than 30 characters, content with a length superior to the input's size. |
Behavior: Text input with clear action
Step 1: By Default, empty text input don't display clear action.
Step 2: Clear action appears when the user enters a character or when the text exceed the input's length.
Step 3: Once the text input has been filled, clear action disappears when the input is in default and/or disabled states. However, it will still appears when you hover or select the input.
Behavior: Text input with show/hide action
Step 1: By default, unlike the clear action, the show/hide action is visible in all states and is always configured to be in hide mode.
Step 2: When the text input is filled or being filled and the clear action is activated, both actionable icons can be available at the same time. This point also depends on the behavior of the clear action, see above.
Step 3: Click on the "hide" icon to display the content. Click on the "show" icon to hide the content.
