Versions Compared

Version Old Version 73 New Version Current
Changes made by

Carlie Bradshaw

Hasitha Jayarathne

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 Removed
Image 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.

Image Removed
Image Added

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 Removed
Image Added
Image Removed
Image Added
Image Removed
Image Added
Image Removed
Image Added

Hover

Image Removed
Image Added
Image Removed
Image Added

On hover over Close icon button:

Image Removed
Image Added
Image Removed
Image Added
Image Removed
Image Added

Active

Image Removed
Image Added
Image Removed
Image Added
Image Removed
Image Added
Image Removed
Image Added

Disabled

Image Removed
Image Added
Image Removed
Image Added
Image Removed
Image Added
Image Removed
Image Added

Error

Image Removed
Image Added

N/A

Image Removed
Image Added
Image Removed
Image Added

Warning

Image Removed
Tag input Warning.pngImage Added

N/A

Image Removed
Tag input Warning 2.pngImage Added

N/A

Focused

Image Removed
Image Added
Image Removed
Image Added
Image Removed
Image Added
Image Removed
Image Added

Interaction

Browsable list

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

When a tag input is first selected, screen readers should state how many tags are currently applied.

...

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 Removed

Image AddedImage 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

Image Removed

<<Short Zeplin link. YouUse this >>

<<Screen with 200 width>>

Code

<<a box containing the code - discuss with Femi>>

Image

https://zpl.io/lr8zk1z

Verint LUX Tag Input - Browsable List.pngImage Added

https://zpl.io/QMmrdqP

Verint LUX Tag Input - Auto Complete.pngImage Added

Code

...