Many tags need a wrapping or stacking layout

What it is

Once there are many chips, a single-line slot will not hold them. With no strategy, they either overflow into an invisible scrollbar or shove the caret out of the viewport, so people cannot tell what is already there or where the next one goes. Tag overflow layout decides in advance to wrap onto several rows or to stack vertically, and keeps the insertion point visible. The issue is how a crowd is arranged, not how a chip is committed or how one is removed.

Why it happens

Each chip has incompressible width. A single line plus horizontal scroll moves early tags out of view; checking and dismiss then require a scroll first, which is hiding data. Pinning the caret at the row end and pushing chips left is a chat-composer model and even worse for checking. Wrapping expands the set into a readable two-dimensional field, trading height for visibility; a max row count is then needed, with inner scroll beyond it, so the rest of the form is not shoved away. Vertical stacking suits long words per chip. Either way, the uncommitted string still being typed must be partitioned from the chips; the caret must not vanish between two chips.

Where it stops holding

When two or three chips are the expected maximum, a wrap strategy is over-design; one line is enough. Read-only display may collapse to “+12”; collapsing during input hides the set being edited. Animated wrapping that shoves later fields on every add will misalign validation messages. Print and narrow mail clients do not host chips; overflow layout must also downgrade to comma-separated text.

Applying it

• Wrap once chips exceed one line of width, and keep the insertion point visible at the end of the last row.
• Cap height and scroll inside the tag region beyond that; do not grow the form without bound.
• Do not pack a dozen chips into one line with only a hairline scrollbar.
• Verify by adding twenty chips of mixed length: can the earliest still be seen, can its close be hit, is the caret still there? If finding them all takes a frantic horizontal scroll, the layout strategy is not in place.

Related

• Within the group: E2.20.1 Free tagging must handle duplicates and near-spellings · E2.20.2 The delimiter that commits a tag must be stated · E2.20.3 Each chip must be removable without disturbing the others
• Adjacent: E2.02 Multiline text areas · E3.08 Chip selection
• Search terms: tag overflow layout · chip wrap · token field layout