Users may provide various categorized input entries (e.g., danger, warning, avoid, and relax), such as those in the following image (e.g., "Relax #1", "Avoid #1", etc.):
When first shown, the screen appears as:
The blank areas (in light blue) below each category turn into autocomplete input fields when they gain focus. However, showing four input fields would clutter the aesthetic.
The idea is to give the user a WYSIWYG experience. Once the user has completed editing, the inputs disappear. The result is what other people will see (who do not have editing privileges).
Invisible input fields are interesting. For example:
- The user clicks on "Unknown User".
- An input field appears, allowing the user to change the "Unknown User" text.
- The input field loses focus, the new value is saved, and the input field disappears.
What would be a good way to indicate that each category can have text added below, without necessarily making the autocomplete field visible all the time?