The transient state describes the stage where users specify the content to be added, edited or to be processed in a defined way.

Multi Input with Multiline Mode

Multi input with multiline mode can be used for transient states where a big set of data is entered / selected and displaying the selection is more important than saving the screen estate.

Multi input multiline entering

When to Use

false

Recommended

Only use for entering content that will be subsequently filled into display format like list and table (e.g. in modal dialog to create content).
Detailed overview of the involved content or items is needed to validate before the final action is performed (e.g. add users, share entity with people).
The user would copy and paste data from a spreadsheet or text file to the multi input field. In this case, the user will need to validate the input on the spot.

dont

false

Not Recommended

Do not use the multiline mode for the final presentation of data. More appropriate format like list and table should be used instead.
Do not use when saving screen space is more important than having all selections displayed.
Do not use as inline control in list and table, as it would enlarge the rows. Use single line mode and increase input width instead.
Do not use for filters, it will break the page header layout. In this case, the single line mode should be used.

Specifications

Multi input - empty multiline

Multi Input has the height of 1 line

Multi input - one-line multiline

Input area is always on the same line as the last token, as long as there is enough space.
When the input area exceeds the space available on the last line, it will slide to a new line below.

Multi input - multiline overflow

Maximum 5 lines should be displayed, including the input area.
When the entered content takes more than 5 lines, a scrollbar inside the multi input will be visible.
During user input and on focus, it will automatically scroll to the end so that the input area is visible.
On blur the scroll position should not change.
Use ARROW-LEFT to focus on previous token.
Use ARROW-RIGHT to focus on next token.
ARROW-UP and ARROW-DOWN do nothing different than what they do for multi input with single line mode.
Press BACKSPACE to delete text in the input area first. When text input is empty, the last token is the focus. On next BACKSPACE pressed it will be deleted.

Same as for single line mode: Use or click on the close button of each token.