:  Carlie Bradshaw

...

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

Usage & Behavior

...

• the tag field, containing:

  • applied tag pills, showing the tags already selected, containing:

    • a tag label.

    • a close icon button.

  • a trigger button to open the tag menu, shown to the right of the applied tag pills.

• a tag menu, containing:

  • a Search field.

  • a list of all available tags, each including:

    • a Checkbox and

    • a label.

  • a scrollbar, where needed.

...

• the tag field, containing:

  • applied tag pills, showing the tags already selected, containing:

    • a tag label.

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

• a tag menu, containing:

  • a list of up to 20 tags.

  • a scrollbar, where needed.

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

...

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

  • Where a tag label exceeds the maximum pill width it should be truncated, with the full label shown in a Tooltip on hover.

• The trigger button should move as tags are applied, always being shown to the right of the last applied tag pill. (Browsable list only).

• The tag field may optionally expand as more tags are applied. A limit may be set to the field height.

• Where there is no more space for additional pills, a Scrollbar should be added to the field to show additional rows of pills.

• Pills should be arranged left-to-right, top to bottom, in the order in which the tags were addedapplied.

...

Tag menu ordering

• Browsable list:

  • The list of tags should be in a logical order to make them easy to scan, such as alphabetically, numerically, or by frequency 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.

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

...

• Multi-select Checkbox List (Browsable list).

• List (Auto-complete).

Applied tag pill

State	Browsable list tag field	Browsable list - tag pills	Auto-complete tag field	Auto-complete - tag pills
Regular		Image Added	Image RemovedImage Added	Image RemovedImage Added
Hover		Image Removed	Image RemovedImage Added On hover over Close icon button: Image Added	Image Added	Image RemovedImage Added
Active		Image RemovedImage Added	Image Added	Image RemovedImage Added
Disabled		Image Added	Image RemovedImage Added	Image RemovedImage Added
Error		N/A	Image RemovedImage Added	N/A
Warning		N/A	Image RemovedImage Added	N/A
Focused		Image Removed	or	Image Added	Image RemovedImage Added

Interaction

Browsable list

...

Applied tag pills

• Tags can be removed by:

  • clicking on a pill to select it and pressing the Delete key. Multiple pills can be selected by using drag.

  • clicking the X button on the right-hand side of a pill .clicking on a pill to select it and pressing the Delete key(Browsable list only).

  • pressing the Delete key when there are no search characters applied. Ctrl/cmd-A can also be used to select all tags before deleting. (Auto-complete only).

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

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

...

Keyboard	Tag field text area	Applied tag pills
	Image RemovedImage Added
Tab	From a previous component, moves focus to the tag field text area. From the tag field text area, navigates to the next component.	Navigates to the next component
Shift + Tab	Reverse tab	Reverse tab
Space	Acts as text input	N/A
Enter	N/A	In outlook it returns focus to text input?
Esc	N/A	N/A
Delete	Acts as text input. After all text has been deleted, removes the last added pill.	Removes the pill, de-selecting the tag.
Arrows	Left/Right: act as arrows within the text. From the left of the text area, left moves to the last pill. Up/Down: moves focus to the auto-suggest results	Left/Right: moves between the pills. Up/Down: N/A
a-z, A-Z	Acts as text input.	Automatically moves focus to the text area.

...