Tag Creation Onboarding Block for React

A tag is trimmed, its inner spaces are kept to one and it keeps the capitals it was typed with, up to 24 characters. A tag is refused if it matches one already there ignoring case (“design” is refused while “Design” exists) and when 12 are there. The refusal is in the line under the field and in the status, and the typed text stays so it can be fixed. MAX, MAX_LENGTH and clean are at the top of the file.

POOL is the ordered list of suggestions; the three shown are the first three that are not tags yet, so each one added is replaced by the next, and when the pool is used up the band says so. Each is a real button named “Add” and the tag; pressing it adds the tag, says so in the status and puts focus back in the field so typing can go on.

Clear all keeps the tags it removed. Undo, which is always on the screen but quiet while there is nothing to undo, puts exactly those tags back. Any other change (adding, removing, renaming) drops what Undo holds, so it can never bring back a stale list.

Type and press Enter or a comma to add. Backspace on an empty field picks the last tag and a second Backspace removes it; the arrow keys move between tags and Enter on one edits it. Save tags, Discard, Undo and Clear all stay in the tab order and answer in words when there is nothing for them to do.

Everything: tags live in the tab and Save tags only says they were kept in this demo. In your app save the list on your server where submit says so, check the repeat on the server as well (the field only checks what is on the screen) and replace POOL with the tags your customers use most.

The field is a fixed box that shows three rows of tags and scrolls past that, so adding the twelfth never moves the band under it; the suggestions wrap, and the foot pins to the bottom of the screen with Discard and Save tags side by side.