sp-tags

NPM 1.9.0

View Storybook

Try it on Stackblitz
Overview API Changelog

Overview

<sp-tags> elements contain a collection of <sp-tag> elements and allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.

View the design documentation for this component.

Usage

See it on NPM! How big is this package in your project? Try it on Stackblitz

yarn add @spectrum-web-components/tags

Import the side effectful registration of <sp-tags> or <sp-tag> via:

import '@spectrum-web-components/tags/sp-tags.js';
import '@spectrum-web-components/tags/sp-tag.js';

When looking to leverage the Tags or Tag base classes as a type and/or for extension purposes, do so via:

import { Tags, Tag } from '@spectrum-web-components/tags';

Anatomy

Tags are created from the following parts:

  • Tags: The container component (<sp-tags>) that manages a collection of <sp-tag> elements.
  • Tag: The individual tag element (<sp-tag>) represents a single tag. Read more about the Tag component.

Options

Basic Tags 
<sp-tags>
    <sp-tag>Tag 1</sp-tag>
    <sp-tag invalid>Tag 2</sp-tag>
    <sp-tag disabled>Tag 3</sp-tag>
</sp-tags>
 With Avatars 
<sp-tags>
    <sp-tag>
        Tag 1
        <sp-avatar
            slot="avatar"
            label="Tag 1"
            src=https://picsum.photos/500/500
        ></sp-avatar>
    </sp-tag>
    <sp-tag invalid>
        Tag 2
        <sp-avatar
            slot="avatar"
            label="Tag 1"
            src=https://picsum.photos/500/500
        ></sp-avatar>
    </sp-tag>
    <sp-tag disabled>
        Tag 3
        <sp-avatar
            slot="avatar"
            label="Tag 1"
            src=https://picsum.photos/500/500
        ></sp-avatar>
    </sp-tag>
</sp-tags>
 With Icons 
<sp-tags>
    <sp-tag>
        Tag 1
        <sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
    </sp-tag>
    <sp-tag invalid>
        Tag 2
        <sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
    </sp-tag>
    <sp-tag disabled>
        Tag 3
        <sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
    </sp-tag>
</sp-tags>

Accessibility

<sp-tags> is a role="list" container that manages a collection of <sp-tag> elements. It has an aria-label attribute that defaults to Tags.

<sp-tags> uses the roving tabindex pattern for efficient keyboard navigation. Tab enters the collection, arrow keys navigate between tags, and only deletable tags are focusable. The container provides role="list" semantics with each tag as a role="listitem" for proper screen reader support.

Mouse

  • Read-only tags: Do not get mouse functionality besides a mouse cursor on hover and do not have interactive functionality.

Keyboard

  • Read-only tags: Cannot be operated by a keyboard and have no interactive functionality.

Slots

Name Description default slot Tag elements to manage as a group

Patch Changes

  • Updated dependencies [7d23140, 7d23140]:
    • @spectrum-web-components/button@1.9.0
    • @spectrum-web-components/reactive-controllers@1.9.0
    • @spectrum-web-components/base@1.9.0
    • @spectrum-web-components/shared@1.9.0

1.8.0

Patch Changes

  • Updated dependencies [15be17d]:
    • @spectrum-web-components/button@1.8.0
    • @spectrum-web-components/base@1.8.0
    • @spectrum-web-components/reactive-controllers@1.8.0
    • @spectrum-web-components/shared@1.8.0

1.7.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/button@1.7.0
    • @spectrum-web-components/base@1.7.0
    • @spectrum-web-components/reactive-controllers@1.7.0
    • @spectrum-web-components/shared@1.7.0

1.6.0

Patch Changes

  • Updated dependencies [00eb0a8]:
    • @spectrum-web-components/button@1.6.0
    • @spectrum-web-components/base@1.6.0
    • @spectrum-web-components/reactive-controllers@1.6.0
    • @spectrum-web-components/shared@1.6.0

1.5.0

Patch Changes

  • #5271 165a904 Thanks @renovate! - Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

  • Updated dependencies [4e06533]:

    • @spectrum-web-components/button@1.5.0
    • @spectrum-web-components/base@1.5.0
    • @spectrum-web-components/reactive-controllers@1.5.0
    • @spectrum-web-components/shared@1.5.0

1.4.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/button@1.4.0
    • @spectrum-web-components/base@1.4.0
    • @spectrum-web-components/reactive-controllers@1.4.0
    • @spectrum-web-components/shared@1.4.0

1.3.0

Patch Changes

  • Updated dependencies [ea38ef0]:
    • @spectrum-web-components/reactive-controllers@1.3.0
    • @spectrum-web-components/button@1.3.0
    • @spectrum-web-components/base@1.3.0
    • @spectrum-web-components/shared@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Note: Version bump only for package @spectrum-web-components/tags

1.1.2 (2025-02-12)

Note: Version bump only for package @spectrum-web-components/tags

1.1.1 (2025-01-29)

Note: Version bump only for package @spectrum-web-components/tags

1.1.0 (2025-01-29)

Bug Fixes

  • lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

1.0.3 (2024-12-09)

Note: Version bump only for package @spectrum-web-components/tags

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/tags

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/tags

0.49.0 (2024-10-15)

Note: Version bump only for package @spectrum-web-components/tags

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/tags

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/tags

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/tags

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/tags

0.47.0 (2024-08-20)

Note: Version bump only for package @spectrum-web-components/tags

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/tags

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/tags

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/tags

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/tags

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/tags

0.42.4 (2024-05-14)

Note: Version bump only for package @spectrum-web-components/tags

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/tags

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/tags

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/tags

0.42.0 (2024-03-19)

Bug Fixes

  • styles, theme: surface exports that omit Spectrum Vars proactively (#4142) (5b524c1)

Features

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/tags

0.41.1 (2024-02-22)

Note: Version bump only for package @spectrum-web-components/tags

0.41.0 (2024-02-13)

Features

  • icon: use core tokens (a11ef6b)

0.40.5 (2024-02-05)

Note: Version bump only for package @spectrum-web-components/tags

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/tags

0.40.3 (2024-01-11)

Note: Version bump only for package @spectrum-web-components/tags

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/tags

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/tags

0.40.0 (2023-11-16)

Bug Fixes

  • tags: make the 'delete' event cancelable (#3778) (d9afd41)

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/tags

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/tags

0.39.2 (2023-10-13)

Note: Version bump only for package @spectrum-web-components/tags

0.39.1 (2023-10-06)

Bug Fixes

  • grid: grid focusgroup fix on mutationObserver (#3684) (5d47db5)

0.39.0 (2023-09-25)

Note: Version bump only for package @spectrum-web-components/tags

0.38.0 (2023-09-05)

Bug Fixes

  • tags: add mod for clear button width (bea891f)

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/tags

0.36.0 (2023-08-18)

Bug Fixes

  • added default focus in focus group (1abe7e7)
  • added default focus in focus group (cd59f18)
  • added Mutation Observer in the tags workflow (3af1861)
  • parentNode declaration (c45fdc3)
  • removed mutation controller from tags and added to focusgroup (aaa1bc0)
  • tags: delete functionality working (60e6c2e)
  • tags: performed the suggested changes (6e3ef36)
  • tags: removed extra white spaces (196bdae)
  • tags: some minor chnages (36886fc)

0.35.0 (2023-07-31)

Note: Version bump only for package @spectrum-web-components/tags

0.34.0 (2023-07-11)

Note: Version bump only for package @spectrum-web-components/tags

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/tags

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/tags

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/tags

0.31.0 (2023-05-17)

Bug Fixes

  • shared: allow "disabled" first to return to "tabindex=0" in "focusable" (160bc59)

0.30.0 (2023-05-03)

Bug Fixes

  • add support for "readonly" attribute (4bce3b7)
  • add t-shirt sizing to Thumbnail and support for "xxs"/"xs" sizes (520a642)
  • correct @element jsDoc listing across library (c97a632)
  • ensure browser understandable extensions (f4e59f7)
  • include default export in the "exports" fields (f32407d)
  • include the "types" entry in package.json files (b432f59)
  • remove errant readme content, correct icon selector (3dd1fb1)
  • stop merging selectors in a way that alters the cascade (369388f)
  • support matching keydown to [dir] (70b40a9)
  • tags: correct render types (ecfb6ab)
  • tags: gate focus with deletable attribute (d5e79f6)
  • tags: support distant sibling selectors (a8dcf7f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • update side effect listings (8160d3a)
  • update to latest spectrum-css packages (a5ca19f)
  • use latest @spectrum-css/* versions (c35eb86)
  • use the "browsers" listing in postcss-preset-env (4eaf6a2)

Features

  • action-button: add action button pattern (03ac00a)
  • action-group: add action-group pattern (d2de766)
  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • button: use synthetic button instead of native (49e94bc)
  • icons-workflow: vend fully registered icon components (941f3a4)
  • include all Dev Mode files in side effects (f70817c)
  • leverage "exports" field in package.json (321abd7)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • tags: add tags pattern (ae91865)
  • tags: manage aria-disabled from disabled attribute (657eba8)
  • tags: update spectrum css input (f8a59ed)
  • update lit-* dependencies, wip (377f3c8)
  • update to Spectrum CSS v3.0.0 (e8b3d8f)
  • use core tokens (d569672)
  • use latest exports specification (a7ecf4b)

0.10.8 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/tags

0.10.7 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/tags

0.10.6 (2023-03-22)

Note: Version bump only for package @spectrum-web-components/tags

0.10.5 (2023-03-08)

Note: Version bump only for package @spectrum-web-components/tags

0.10.4 (2023-02-13)

Note: Version bump only for package @spectrum-web-components/tags

0.10.3 (2023-02-08)

Note: Version bump only for package @spectrum-web-components/tags

0.10.2 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/tags

0.10.1 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/tags

0.10.0 (2022-12-08)

Features

  • use core tokens (d569672)

0.9.7 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/tags

0.9.6 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/tags

0.9.5 (2022-10-28)

Note: Version bump only for package @spectrum-web-components/tags

0.9.4 (2022-10-17)

Note: Version bump only for package @spectrum-web-components/tags

0.9.3 (2022-10-10)

Note: Version bump only for package @spectrum-web-components/tags

0.9.2 (2022-09-14)

Note: Version bump only for package @spectrum-web-components/tags

0.9.1 (2022-08-24)

Note: Version bump only for package @spectrum-web-components/tags

0.9.0 (2022-08-09)

Features

  • include all Dev Mode files in side effects (f70817c)

0.8.15 (2022-08-04)

Note: Version bump only for package @spectrum-web-components/tags

0.8.14 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/tags

0.8.13 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/tags

0.8.12 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/tags

0.8.11 (2022-05-27)

Note: Version bump only for package @spectrum-web-components/tags

0.8.10 (2022-05-12)

Note: Version bump only for package @spectrum-web-components/tags

0.8.9 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/tags

0.8.8 (2022-03-30)

Note: Version bump only for package @spectrum-web-components/tags

0.8.7 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/tags

0.8.6 (2022-03-04)

Note: Version bump only for package @spectrum-web-components/tags

0.8.5 (2022-02-22)

Note: Version bump only for package @spectrum-web-components/tags

0.8.4 (2022-02-02)

Note: Version bump only for package @spectrum-web-components/tags

0.8.3 (2022-01-26)

Note: Version bump only for package @spectrum-web-components/tags

0.8.2 (2022-01-07)

Note: Version bump only for package @spectrum-web-components/tags

0.8.1 (2021-12-13)

Bug Fixes

  • add t-shirt sizing to Thumbnail and support for "xxs"/"xs" sizes (520a642)

0.8.0 (2021-11-08)

Features

  • update lit-* dependencies, wip (377f3c8)

0.7.1 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/tags

0.7.0 (2021-11-02)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.6.17 (2021-10-12)

Note: Version bump only for package @spectrum-web-components/tags

0.6.16 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/tags

0.6.15 (2021-09-13)

Note: Version bump only for package @spectrum-web-components/tags

0.6.14 (2021-08-24)

Bug Fixes

  • correct @element jsDoc listing across library (c97a632)

0.6.13 (2021-08-03)

Note: Version bump only for package @spectrum-web-components/tags

0.6.12 (2021-07-22)

Note: Version bump only for package @spectrum-web-components/tags

0.6.11 (2021-07-01)

Note: Version bump only for package @spectrum-web-components/tags

0.6.10 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/tags

0.6.9 (2021-06-07)

Note: Version bump only for package @spectrum-web-components/tags

0.6.8 (2021-05-24)

Note: Version bump only for package @spectrum-web-components/tags

0.6.7 (2021-05-12)

Bug Fixes

  • tags: gate focus with deletable attribute (d5e79f6)

0.6.6 (2021-04-15)

Note: Version bump only for package @spectrum-web-components/tags

0.6.5 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/tags

0.6.4 (2021-03-29)

Note: Version bump only for package @spectrum-web-components/tags

0.6.3 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/tags

0.6.2 (2021-03-22)

Bug Fixes

  • add support for "readonly" attribute (4bce3b7)

0.6.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/tags

0.6.0 (2021-03-04)

Features

  • use latest exports specification (a7ecf4b)

0.5.3 (2021-02-11)

Bug Fixes

  • update to latest spectrum-css packages (a5ca19f)

0.5.2 (2021-02-02)

Note: Version bump only for package @spectrum-web-components/tags

0.5.1 (2021-01-28)

Note: Version bump only for package @spectrum-web-components/tags

0.5.0 (2021-01-21)

Bug Fixes

  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)
  • use the "browsers" listing in postcss-preset-env (4eaf6a2)

Features

  • action-button: add action button pattern (03ac00a)
  • button: use synthetic button instead of native (49e94bc)
  • icons-workflow: vend fully registered icon components (941f3a4)
  • tags: update spectrum css input (f8a59ed)

0.4.0 (2021-01-13)

Bug Fixes

  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)

Features

  • action-button: add action button pattern (03ac00a)
  • button: use synthetic button instead of native (49e94bc)
  • icons-workflow: vend fully registered icon components (941f3a4)
  • tags: update spectrum css input (f8a59ed)

0.3.4 (2020-10-12)

Note: Version bump only for package @spectrum-web-components/tags

0.3.3 (2020-10-12)

Bug Fixes

  • include default export in the "exports" fields (f32407d)

0.3.2 (2020-09-25)

Bug Fixes

  • update side effect listings (8160d3a)

0.3.1 (2020-09-14)

Note: Version bump only for package @spectrum-web-components/tags

0.3.0 (2020-08-31)

Bug Fixes

  • support matching keydown to dir
  • tags: correct render types (ecfb6ab)
  • tags: support distant sibling selectors (a8dcf7f)

Features

  • update to Spectrum CSS v3.0.0 (e8b3d8f)
  • action-group: add action-group pattern (d2de766)

0.2.4 (2020-08-19)

Note: Version bump only for package @spectrum-web-components/tags

0.2.3 (2020-07-27)

Note: Version bump only for package @spectrum-web-components/tags

0.2.2 (2020-07-24)

Bug Fixes

  • ensure browser understandable extensions (f4e59f7)

0.2.1 (2020-07-22)

Note: Version bump only for package @spectrum-web-components/tags

0.2.0 (2020-07-17)

Features

  • tags: manage aria-disabled from disabled attribute (657eba8)
  • leverage "exports" field in package.json (321abd7)

0.1.2 (2020-06-08)

Note: Version bump only for package @spectrum-web-components/tags

0.1.1 (2020-05-12)

Note: Version bump only for package @spectrum-web-components/tags

0.1.0 (2020-05-08)

Bug Fixes

  • remove errant readme content, correct icon selector (3dd1fb1)

Features

  • tags: add tags pattern (ae91865)