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.
Rich dynamic 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.
Use case
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 details
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 dynamic input
Simple dynamic 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.
