Versions Compared

Version Old Version 74 New Version 75
Changes made by

Carlie Bradshaw

Femi

Saved on

Key

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

...

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 available tags.

  • Users may not know the exact terminology used for the tag labels.

  • For small-to-medium size tagsets.

Image Modified

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 Modified

Usage & Behavior

General guidelines

...

For the states of the tag menu list items, follow Lists.

State

Browsable list tag field

Browsable list - tag pills

Auto-complete tag field

Auto-complete - tag pills

Regular

Image ModifiedImage ModifiedImage ModifiedImage Modified

Hover

Image ModifiedImage Modified

On hover over Close icon button:

Image Modified		Image ModifiedImage Modified

Active

Image ModifiedImage ModifiedImage ModifiedImage Modified

Disabled

Image ModifiedImage ModifiedImage ModifiedImage Modified

Error

Image Modified

N/A

Image ModifiedImage Modified

Warning

Image Modified

N/A

Image Modified

N/A

Focused

Image ModifiedImage ModifiedImage ModifiedImage Modified

Interaction

Browsable list

...

For the behavior of the tag menu, follow Drop-down Menu.

Keyboard

Tag field trigger button

Tag pills

Image ModifiedImage Modified

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 outside of the tag input.

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.

Page up/Home

Navigates to the first pill.

Navigates to the first pill.

Page down/End

N/A

Navigates to the trigger button.

Auto-complete tag field

For the behavior of the tag menu, follow Live Search.

Keyboard

Tag field text area

Applied tag pills

Image ModifiedImage Modified

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 suggested search results.

Left/Right: moves between the pills.

Up/Down: N/A

Page up/Home

Navigates to the first pill.

Navigates to the first pill.

Page down/End

N/A

Navigates to the text area.

a-z, A-Z

Acts as text input.

Automatically moves focus to the text area and acts as text input.

Design

...

Zeplin link

Screen thumbnail

https://zpl.io/6Ne3W9j

Tag Input.pngImage Added

Code

...