Status
The dynamic input has different status based on the usage and the context. Based on the amount of element you want ot add inside a list, you can choose between the rich input and the simple input.
Pre-activation
It is an additional step that has been designed to avoid overloading the visual display, particularly when a user is adding more than one item at the time (ex: rich dynamic input)
|
Default The dynamic input before a user click on it. |
|
|
Hover The dynamic input when a user hovers over the input. |
|
|
Default The dynamic input before a user click on it. |
|
|
|
Hover The dynamic input when a user hovers over the input. |
|
Rich input
The rich dynamic input can be use to add a bulk of element inside a list.
The pre-activation has been designed to avoid overloading the visual display. When you use the dynamic rich input, you might have to add a consequent amount of item in a list. In this case, we recommend to add a pre-activation step.
|
Default behavior When you select the input, whether simple or rich, you get a double border to show that the element is selected. The 'allow' call to action remains disabled until you write valid content.
When the content is recognised, it becomes a chip, so you can modify or delete it if necessary. The badges become active when the added elements are recognised and their counter will provide the number of element types added.
For example, if I add 5 emails, the "email" badge will indicate the number 5. |
|
|
|
|
Error behavior Dynamic rich input can be displayed when there are one or more errors in the elements that the user wishes to add. These errors can be identified because the chips turn red, and when you hover over them you know what type of error is occurring. |
|
|
|
|
Multiple errors When there are several errors, the error chips are pushed to the end of the list and a global error is returned under the entry. |
|
|
|
|
Errors tooltip When you hover over an error, a tooltip will provide information about the type of error that is occurring regarding the hovered element. |
|
|
|
|
Add a list of items containing an error When you have a list of items and there is an error in this list, you can always validate it by clicking on "Allow". In this case, all valid items will be added and the invalid item will remain in the list. |
|
|
Default behavior When you select the input, whether simple or rich, you get a double border to show that the element is selected. The 'allow' call to action remains disabled until you write valid content.
When the content is recognised, it becomes a chip, so you can modify or delete it if necessary. The badges become active when the added elements are recognised and their counter will provide the number of element types added.
For example, if I add 5 emails, the "email" badge will indicate the number 5. |
|
|
|
|
Error behavior Dynamic rich input can be displayed when there are one or more errors in the elements that the user wishes to add. These errors can be identified because the chips turn red, and when you hover over them you know what type of error is occurring. |
|
|
|
|
Multiple errors When there are several errors, the error chips are pushed to the end of the list and a global error is returned under the entry. |
|
|
|
|
Errors tooltip When you hover over an error, a tooltip will provide information about the type of error that is occurring regarding the hovered element. |
|
|
|
|
Add a list of items containing an error When you have a list of items and there is an error in this list, you can always validate it by clicking on "Allow". In this case, all valid items will be added and the invalid item will remain in the list. |
|
Simple input
Simple input should be use when you need to add only one typology of element inside a list.
|
Default behavior |
|
|
|
|
Error behavior When an entry is invalid, not recognised or for any other reason, the dynamic entry is displayed in red with a warning message to inform the user that their entry cannot be added. |
|
|
Default behavior |
|
|
|
|
Error behavior When an entry is invalid, not recognised or for any other reason, the dynamic entry is displayed in red with a warning message to inform the user that their entry cannot be added. |
|