<u-tags>

<u-tags> extends <input> with multiselect abilities. While multiselect combobox does not exist as a HTML element or ARIA pattern, <u-tags> adhere closely to HTML conventions while providing a thoroughly tested and accessible user experience.

Quick intro:

• Use <data> as direct child elements - these are the removable tags
• Use <input> and optionally <u-datalist> to allow adding and suggesting tags
• Use data-* attributes to translate screen reader announcements
• Use matching id on <input> and for attribute on <label> to connect
• MDN Web Docs: <data> (HTMLDataElement) / <input> (HTMLInputElement) / <datalist> (HTMLDatalistElement) / <option> (HTMLOptionElement)

Example

Install

NPM

npm add -S @u-elements/u-tags

PNPM

pnpm add -S @u-elements/u-tags

Yarn

yarn add -S @u-elements/u-tags

Bun

bun add -S @u-elements/u-tags

CDN

<script type="module" src="https://unpkg.com/@u-elements/u-tags@latest/dist/u-tags.js"></script>

Attributes and props

<u-tags>

• Attributes: all global HTML attributes such as id, class, data-
  • data-added prefixes announcements about additions. Defaults to "Added"
  • data-removed prefixes announcements about removals. Defaults to "Removed"
  • data-empty announces no selected items. Defaults to "No selected"
  • data-found announces where to find amount of selected items. Defaults to "Navigate left to find %d selected"
  • data-of separates "number of total" in announcements. Defaults to "of"
• DOM interface: UHTMLTagsElement extends HTMLElement
  • UHTMLTagsElement.control returns HTMLInputElement contained in <u-tags>
  • UHTMLTagsElement.items returns NodeListOf<HTMLDataElement>

<data>

• Attributes: all global HTML attributes such as id, class, data-
  • value optionally specify the machine-readable translation of the text content.
• DOM interface: HTMLDataElement
  • HTMLDataElement.value string reflecting the value HTML attribute.

Events

In addition to the usual events supported by HTML elements, the <u-tags> elements dispatches a custom tags event before change, allowing you to keep track of and prevent additions and removal:

myUTags.addEventListener('tags', (event) => {
  event.detail.action // String 'add' or 'remove'
  event.detail.item // HTMLDataElement to add or remove
  event.preventDefault() // Optionally prevent action
})

Styling

<u-tags> renders as display: block, while <data> renders as display: inline-block with a ::after element to render the removal ×.

Example: Norwegian

Accessibility

Screen reader	<u-tags>
VoiceOver (Mac) + Chrome	✅
VoiceOver (Mac) + Edge	✅
VoiceOver (Mac) + Firefox	✅
VoiceOver (Mac) + Safari	✅
VoiceOver (iOS) + Safari	✅
Jaws (PC) + Chrome	✅
Jaws (PC) + Edge	✅
Jaws (PC) + Firefox	✅
NVDA (PC) + Chrome	✅
NVDA (PC) + Edge	✅
NVDA (PC) + Firefox	✅ needs focus mode to announce tag removal
Narrator (PC) + Chrome	✅
Narrator (PC) + Edge	✅
Narrator (PC) + Firefox	✅
TalkBack (Android) + Chrome	✅
TalkBack (Android) + Firefox	✅
TalkBack (Android) + Samsung Internet	✅

Specifications

• DOM interface: HTMLElement
• HTML Standard: The <div> element
• DOM interface: HTMLDataElement
• HTML Standard: The <data> element