:  Carlie Bradshaw

Description

Tag inputs allow multiple metadata tags to be added to a piece of content from a pre-defined set.

Categorising content with tags can make it easier to find, instigate workflows, or define and control access permissions. Common tagsets include department, region, product, and personal information such as email addresses.

...

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

...

• the tag field, containing:

  • applied tag pills, showing the tags already selected, containing:

    • a tag label.

    • a remove icon button.

  • a trigger button to open the tag menu, shown to the right of the applied tag pills.

• a tag menu, containing:

  • a Search field (optional).

  • a list of all available tags, each including:

    • a label. Checkbox and

    • a checkboxlabel.

  • a scrollbar, where needed.

...

• the tag field, containing:

  • applied tag pills, showing the tags already selected, containing:

    • a tag label.

  • a text insertion pointarea, to the right of any applied tags.

• a tag menu, containing:

  • a list of up to 20 tags.

  • a scrollbar, where needed.

  • a View All Tags link after the last tag (optional).

...

• For both input types, search should follow the logic and behavior of Live Search.

Tag field

• 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 width of each pill will depend on its content, within minimum and maximum limits.The tag field may optionally expand as more tags are applied. A limit may be set to the field height.Where

  • 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

  to show additional rows of pills.

...

• • .

  • When pills are removed, the field will shrink again.

...

Tag menu ordering

• Browsable list:

  • The list of tags should be in a logical order to make them easy to scan, such as alphabetically, numerically, or by frequency of use.

  • The tag order should remain the same when a search is applied.

• Auto-complete:

  • When the tag field is first selected, the tags should be ordered by frequency or recency.

  • After search, the results should be ordered by relevance.

Pill ordering

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

  • .

States

...

For the states of the tag menu list items, follow :

...

Multi-select Checkbox List (Browsable list).

Lists.

State	Browsable list tag field	Browsable list - tag pills	Auto-complete tag field

Applied tag pill

Auto-complete - tag pills
Regular	Image Added

Image Removed

Image Added

Image Removed

Image Added

Image Removed

Image Added

Hover

Image RemovedImage Removed

Image Added

Image Removed

Image Added On hover over Close icon button: Image Added

Image Added

Image Removed

Image Added
Active	Image Added

Image Removed

Image Added

Image Removed

Image Added

Image Removed

Image Added
Disabled	Image Added

Image Removed

Image Added

Image Removed

Image Added

Image Removed

Image Added

Error

Image RemovedImage Removed

Image Added

N/A

?

	Image Added	Image Added
Warning	Image Added

Image Removed

N/A

Image Removed

Image Added

N/A

?

Focused	Image Added

Image Removed

Image Added

Image Removed

Image Added

Image Removed

Image Added

Interaction

Browsable list

...

• In the search field:

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

  • pressing Enter will:

    • selects the top tagleave the focus on the search field, and

    • clears the search field, ready for another search. The tag selector remains leave the tag menu open.

• Within the tag list:

  • clicking anywhere on the tag label or checkbox selects and applies the tag. The tag selector menu 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. clicking on a pill to select it and pressing the Delete key(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).

...

Validation and Errors

The tag menu should show an empty state when a search has no matching tags. See Live Search.

Best practices

General

...

Use:

• a browsable list for smaller tagsets where the user is unlikely to know which tags are available.

• auto-complete for larger tagsets where the user is likely to know the exact label for the tag(s) they’re looking for.

Don’t use:

...

• where only one tag can be applied to an item → use a Drop-down Menu instead.

• to apply filters when searching for content → use the Filter Pane instead.

Accessibility Compliance

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.

Browsable list

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

Keyboard	Tag field trigger button	Tag pills

Keyboard

Image Added

Description

Image 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 outside of the tag input.
Shift + Tab	Reverse tab.	Reverse tab.
Space	Selects the trigger button to open the tag menu

, or focuses the pill (for tooltips).

.	N/A
Enter	Selects the trigger button to open the tag menu

, or

focuses the pill (for tooltips).

Delete

On the trigger button: removes the last

.	Removes the pill, de-selecting the tag. Focus moves to the pill or trigger button immediately to its right.

On a pill: removes

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

On the trigger button:

	N/A	N/A
Arrows	Left/Right: moves between the pills and trigger button. Up/Down: single pill row: N/A

On a

multiple pill

: removes the pill, de-selecting the tag.Arrows

rows: moves between rows.

Left/Right:

move

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

Description

Tag field text area	Applied tag pills
	Image Added	Image Added
Tab	From a previous component, moves focus to the

first pill in the listFrom the text field, navigates

tag field text area.

Moves between the pills.

After the last pill, moves to the text field.

On the 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

On a pill: focuses the pill (for tooltips)

Acts as text input.	N/A
Enter

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

On

N/A	Moves focus to the text area

: opens the tag menu

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

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

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:

move

moves between the pills

and

. 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

/cursor

to

right of

the

last pill and starts to search.

Tag menu

...

Design

...

...

Design

...

Zeplin link

...

Screen thumbnail

...

<<Short Zeplin link. YouUse this >>

...

<<Screen with 200 width>>

Code

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

io/lr8zk1z	Image Added
https://zpl.io/QMmrdqP	Image Added

Code

...