Should tags be inside or outside the input field
So tagging inputs are pretty common but there are generally 2 different approaches I see for displaying the tags:
- The tags are below the input outside of the type-able space:
- The tags are inside the input:
Now from a developer standpoint (which is where I am coming from) the second form is leaps and bounds more difficult to implement just from a general standpoint and even harder when you factor in multiple browsers and mobile support but I am trying to think if there is a clear UX reason why one is far superior vs the other.
The second one does seem to have some benefits for keyboard centric users. Most implementations will allow the user to use the backspace to modify the previous tag. Some will allow you to use the arrow keys to modify previous tags too. Other than being able to use the keyboard to modify existing tags, I don't know what other UX benefits the second form has.
One issue about the second form vs the first form is that implementations of the first form that I have seen are pretty consistent which each other. You type in the input box, select your value, and in goes in the list below. There might be some minor difference but nothing that major. The second forms can have some pretty major differences between implementations. I have seen the backspace implemented where in one case it would just convert the last tag to text that can be modified (like with this site) or the it would select the last tag but not do anything until you did something else, or just straight up delete the previous tag immediately.
Now I lean towards the first form with the tags outside of the input and while part of that might be my bias from the coding implementation standpoint, I also think that the user is going to know pretty much how it works if there ever seen a tagging input in this form before.
Are there any other reasons on why the second form of the tags being inside the input is a better UX?