Versions Compared

Version Old Version 55 New Version 56
Changes made by

Carlie Bradshaw

Carlie Bradshaw

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Image RemovedImage Added

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.

...

State

Browsable list tag field

Browsable list - tag pills

Auto-complete tag field

Auto-complete - tag pills

Regular

Hover

On hover over Close icon button:

Active

Disabled

Error

N/A

N/A

Warning

N/A

N/A

Focused

Image RemovedImage AddedImage Added

Interaction

Browsable list

...

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

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

...

Keyboard

Tag field trigger button

Applied tag pills

Image RemovedImage AddedImage RemovedImage Added

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.

...

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

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.

...