tags-input

An input for multiple small strings.

code

<tags-input>
  <select multiple="">
    <option value="dog">dog</option>
    <option value="cat">cat</option>
    <option value="hamster">hamster</option>
    <option value="parrot" selected="">parrot</option>
    <option value="spider">spider</option>
    <option value="goldfish" selected="">goldfish</option>
  </select>
</tags-input>

Why is this wrapping a <select multiple>? It lets us render all currently available and selected tags.

Also the fallback when javascript is not enabled is decent. The difference being that you can only choose available tags, not create new ones.

Styling

code

<style>
  tags-input.styled .tags-container {
    padding: 0.5em;
  }
  tags-input.styled .tag {
    color: var(--color);
    background-color: var(--color-bg-down);
    display: inline-block;
    border: 1px solid var(--color);
    border-radius: 1em;
    padding: 0.3em 1em;
    margin-right: 0.5em;
    margin-top: 0.3em;
  }
  tags-input.styled .tag button {
    font: inherit;
    color: var(--color);
    border: none;
    background: none;
    margin: 0;
    padding: 0;
    margin-left: 0.5em;
    cursor: pointer;
  }
  tags-input.styled input {
    margin: 0.5em;
  }
</style>
<tags-input class="styled">
  <select multiple="">
    <option value="dog">dog</option>
    <option value="cat">cat</option>
    <option value="hamster">hamster</option>
    <option value="parrot" selected="">parrot</option>
    <option value="spider">spider</option>
    <option value="goldfish" selected="">goldfish</option>
  </select>
</tags-input>

Attributes

Texts for the placeholder and the title of the remove button (remove-title) can be passed as attributes.

code

<tags-input class="styled" placeholder="Choose or select a tag" remove-title="Remove this tag">
  <select multiple="">
    <option value="dog">dog</option>
    <option value="cat">cat</option>
    <option value="hamster">hamster</option>
    <option value="parrot" selected="">parrot</option>
    <option value="spider">spider</option>
    <option value="goldfish" selected="">goldfish</option>
  </select>
</tags-input>

Event

<tags-input> emits a change event.

code

<tags-input id="listen-to-me" class="styled">
  <select multiple="">
    <option value="dog">dog</option>
    <option value="cat">cat</option>
    <option value="hamster">hamster</option>
    <option value="parrot" selected="">parrot</option>
    <option value="spider">spider</option>
    <option value="goldfish" selected="">goldfish</option>
  </select>
</tags-input>
<span id="change-result"></span>
<script>
  document.querySelector("#listen-to-me")
  .onchange = (e) =>
    document.querySelector("#change-result")
      .textContent = `Tags: ${e.detail.join(", ")}`;
</script>

Forms

Inside of a <form> you need to use the getAll method of FormData to get the values as an array.

code

<form>
  <tags-input class="styled">
    <select name="pets" multiple="">
      <option value="dog">dog</option>
      <option value="cat">cat</option>
      <option value="hamster">hamster</option>
      <option value="parrot" selected="">parrot</option>
      <option value="spider">spider</option>
      <option value="goldfish" selected="">goldfish</option>
    </select>
  </tags-input>
  <input type="submit">
</form>
<span id="form-result"></span>
<script>
  document.querySelector("form")
  .onsubmit = (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
    document.querySelector("#form-result")
      .textContent = `Pets: [${data.getAll("pets").join(", ")}]`;
  };
</script>