Versions Compared

Version Old Version 44 New Version 45
Changes made by

Carlie Bradshaw

Carlie Bradshaw

Saved on

Key

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

[data-colorid=mw6l8s1x2o]{color:#ff5630} html[data-color-mode=dark] [data-colorid=mw6l8s1x2o]{color:#cf2600}[data-colorid=ientlcdcf7]{color:#36b37e} html[data-color-mode=dark] [data-colorid=ientlcdcf7]{color:#4cc994}:  Carlie Bradshaw

Table of Contents
minLevel1
maxLevel3

...

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.

...

  • Pills should be arranged left-to-right in the order in which the tags were added.

States

IMAGES

State

Browsable list tag field

Auto-complete tag field

Applied tag pill

Regular

List items: follow Multi-select Checkbox List

Follow Text Field ? And List.

Hover

On hover over Close icon button:

Active

Disabled

Error

N/A?

Warning

N/A?

Focused

...

Keyboard

Description

Tab

  • From a previous component, moves focus to the trigger button.

  • From the trigger button, navigates to the next component.

Shift + Tab

Reverse tab

Space

  • Selects the trigger button to open the tag menu, or

  • focuses the pill (for tooltips).

Enter

  • Selects the trigger button to open the tag menu, or

  • focuses the pill (for tooltips).

Delete

On the trigger button: removes the last pill, de-selecting the tag.

On a pill: removes the pill, de-selecting the tag.

Esc

On the trigger button: N/A

On a pill: removes the pill, de-selecting the tag.

Arrows

Left/Right: moves move between the pills and trigger button.Up/Down: nothing?

Auto-complete tag field

Keyboard

Description

Tab

  • From a previous component, moves focus to the first pill in the list.

  • Moves between the pills.

  • After the last pill, moves to the text field.

  • From the text field, navigates to the next component.

Shift + Tab

Reverse tab

Space

On a pill: focuses the pill (for tooltips)

On the text area: as text input.

Enter

On a pill: focuses the pill (for tooltips).

On the text area: opens the tag menu.

Esc

Removes the pill, de-selecting the tag.

Delete

On a pill: removes the pill, de-selecting the tag.

On the text area: as text input. After all text deleted, removes the last added pill.

Arrows

Left/Right: moves move between the pills and text area.

a-z, A-Z

Automatically moves focus/cursor to right of the last pill and starts to search.

...