Tags

Tags are elements used to label, categorize or describe an element.

Examples

Tag input element allows the user to define one or more tags. A tag can be confirmed with Tab or Enter key.

Base#

<chi-tags placeholder="Add tag"></chi-tags>

<ul class="chi-tags">
  <li class="-flex--grow1">
    <input class="chi-tags__input" type="text" placeholder="Add tag" />
  </li>
</ul>

With predefined tags#

<chi-tags id="predefined-tags" placeholder="Add tag"></chi-tags>

<script>
document.getElementById('predefined-tags').tags = [
  { name: 'First tag' },
  { name: 'Second tag' },
];
</script>

<ul class="chi-tags">
  <li>
    <div class="chi-tag">
      <div class="chi-badge">
        <span>
          First tag
        </span>
        <button class="chi-button -icon -close -xs">
          <div class="chi-button__content">
            <i class="chi-icon -xs icon-x" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
  </li>
  <li>
    <div class="chi-tag">
      <div class="chi-badge">
        <span>
          Second tag
        </span>
        <button class="chi-button -icon -close -xs">
          <div class="chi-button__content">
            <i class="chi-icon -xs icon-x" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
  </li>
  <li class="-flex--grow1">
    <input class="chi-tags__input" type="text" placeholder="Add tag" />
  </li>
</ul>

Web Component

Interfaces and types

Name	Interface
`Tag`	interface Tag { name: `string`; }

Accessibility

Accessibility guidelines coming soon