Content Comparison

...

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

• 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.

  • When the maximum field height is reached and there is no more space for additional pills, a vertical Scrollbar should will be added to the field.

...

Tag menu ordering

...

• In the search field:

  • entering characters filters will filter the tags using Live Search.

  • pressing Enter will:

    • selects select and apply the top tag, and

    • clears clear the search field, ready for another search. The , and

    • leave 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 tag menu is opened.

  • the most frequently or recently selected tags are shown.

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

• Pressing Enter while focus is on the tag field:

  • applies the first tag in the tag menu,

  • clears the current search, and

  • closes the tag menu.

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

  • keeps the existing search string, and

  • keeps the tag menu open.

...

• 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. (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.

• Hovering on a pill label may open a Tooltip showing further details, where relevant. (Optional).

...

Keyboard	Tag field trigger button	Applied tag pills
Tab	From a previous component, moves focus to the trigger button. From the trigger button, navigates to the next component.	Navigates to the next component.
Shift + Tab	Reverse tab.	Reverse tab.
Space	Selects the trigger button to open the tag menu.	N/A
Enter	Selects the trigger button to open the tag menu.	Removes the pill, de-selecting the tag. Focus moves to the pill or trigger button immediately to its right.
Delete and Backspace	N/A	Removes the pill, de-selecting the tag. Focus moves to the pill or trigger button immediately to its right.
Esc	N/A	N/A
Arrows	Left/Right: moves between the pills and trigger button. Up/Down: single pill row: N/A multiple pill rows: moves between rows.	Left/Right: moves between the pills and trigger button. Up/Down: single pill row: N/A multiple pill rows: moves between rows.

...

For the behavior of the tag menu, follow Search with Auto Suggest.

Keyboard	Tag field text area	Applied tag pills
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	Moves focus to the text area.
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.

...