:  Carlie Bradshaw

...

Tag inputs allow multiple metadata tags to be added to a piece of content from a pre-defined set. Adding Categorising content with tags can make the content it easier to find, instigate relevant workflows, or define access permissions.

Common tagsets include department, region, product, and personal information such as email addresses.

...

Note: Where tags are subsequently being used to filter content, use the Filter Pane.

Types

Type	Usage	Image
Browsable list	Users may not know what the options are, and need to browse the entire list of possible tags. Users may not know the exact terminology used for the tag labels. For small-to-medium size tagsets.
Auto-completion	Users know what they are looking for, and do not need to browse the entire list of possible tags. Users are likely to know the exact labels for the tags they’re looking for. For large tagsets.

...

• the tag field, containing:

  • applied tag pills, showing the tags already selected.

  • a text field, to the right of any applied tags.

• a completion menu, containing:

  • a list of up to 20 tags.

  • a View All Tags link after the last tag. (Optional).

  • a scrollbar, where needed.

...

• Where appropriate, tags may be pre-applied by default.When the browsable list tag menu is opened the search field should be in focus by default.

Internal Logic

...

• The tag field may optionally expand as more tags are applied. A limit may be set to the field height.Can pills be truncated if the tag is particularly long? With the full label shown on hover?

• The width of each pill will depend on its content, within minimum and maximum limits.

• When there is no more space for additional pills, either:

  • a Scrollbar may be added to the field to show additional rows of pills, or

  • multiple additional tags may be combined into one pill. The pill label should show the number of additional tags, e.g. +4 tags. (Browsable list only)

    • On hover, all of the individual additional tags will be shown in a Tooltip.

    • On click, the full tag menu will open, allowing the user to remove tags. (Browsable list only).

...

Tag ordering

• Browsable list:

  • The list of tags should be in a logical order to make them easy to scan, such as alphabetical, numerical, orfrequency of use.

  • The tag order should remain the same when a search is applied.

• Auto-complete:

  • When the tag field is first selected, the tags should be ordered by frequency or recency for the individual user.

  • After search, the results should be ordered by relevance.

...

• Pills should be arranged left-to-right in the order in which the tags were added.

States

IMAGES

...

• the trigger button, or

• any blank space in the tag field.

Tag menu

The search field will be focused by default when the menu is opened.

• In the search field:

  • entering characters filters the tags using Live Search.

  • pressing Enter:

    • selects the top tag, and

    • clears the search field, ready for another search. The tag selector remains open.

• Within the tag list:

  • clicking anywhere on the tag label or checkbox selects and applies the tag. The tag selector remains open.

• Clicking outside of the tag menu closes it.

...

• When the tag field is selected:

  • the completion menu is opened.

  • the most frequently or recently selected tags are shown.

• As characters are entered, the tags are filtered using Live Search.

• Pressing Enter while focus is on the tag field:

  • applies the first tag in the completion menu,

  • clears the current search, and

  • closes the completion menu.

• Where no matching tags are shown, pressing Enter while focus is on the tag field should keep :

  • keeps the existing search string, and

  • keeps the completion menu open.

Completion menu

• Clicking on a tag will:

  • apply the focused tag,

  • clear the current search,

  • close the completion menu, and

  • return the focus to the tag field, ready to search again.

• Clicking outside of the completion menu closes it. The existing search string should be kept.

...

• Tags can be removed by:

  • clicking the X button on the right-hand side of a pill.

  • clicking on a pill to select it and clicking Delete.

• When a pill is removed, the remaining pills will move left to close the gap.

• Clicking or hovering on a pill label may open a Popover showing further details, where relevant. (optionalOptional).

...

Auto-complete

• Pressing Delete when there are no search characters applied will delete the last applied tag pill.

...

...

...