Tag Input

<wa-tag-input label="Keywords" placeholder="Add a keyword" value="design, accessibility"></wa-tag-input>

<wa-tag-input label="Skills"></wa-tag-input>

<wa-tag-input label="Ingredients" hint="Press Enter or type a comma after each ingredient."></wa-tag-input>

<wa-tag-input label="Guest list" placeholder="Add a name"></wa-tag-input>

<wa-tag-input label="Toppings" value="Mushrooms, Olives, Peppers"></wa-tag-input>

<div class="wa-stack">
  <wa-tag-input label="Space-separated" delimiter=" " placeholder="Type a word and a space"></wa-tag-input>
  <wa-tag-input label="Commas or semicolons" delimiter=",;" placeholder="Type a value and , or ;"></wa-tag-input>
  <wa-tag-input label="Enter only" delimiter="" placeholder="Type a value and press Enter"></wa-tag-input>
</div>

<wa-copy-button value="Cumin, Paprika, Coriander, Turmeric">
  <wa-button appearance="filled">
    <wa-icon slot="start" name="clipboard"></wa-icon>
    Copy spices
  </wa-button>
</wa-copy-button>

<wa-divider></wa-divider>

<wa-tag-input label="Spices" placeholder="Paste the copied list here"></wa-tag-input>

<wa-tag-input label="Tickers" value="AAPL, MSFT, NVDA" with-clear></wa-tag-input>

<wa-tag-input
  label="Desert island albums"
  hint="Choose up to three."
  value="Kind of Blue, Rumours"
  max-tags="3"
  placeholder="Add an album"
></wa-tag-input>

<wa-tag-input label="Dice rolls" value="6, 6" allow-duplicates placeholder="Roll again"></wa-tag-input>

<div class="wa-stack">
  <wa-tag-input appearance="outlined" value="Outlined" label="Outlined"></wa-tag-input>
  <wa-tag-input appearance="filled" value="Filled" label="Filled"></wa-tag-input>
  <wa-tag-input appearance="filled-outlined" value="Filled outlined" label="Filled outlined"></wa-tag-input>
</div>

<wa-tag-input label="Interests" value="Hiking, Chess" pill></wa-tag-input>

<div class="wa-stack">
  <wa-tag-input size="xs" label="Extra small" value="Extra small"></wa-tag-input>
  <wa-tag-input size="s" label="Small" value="Small"></wa-tag-input>
  <wa-tag-input size="m" label="Medium" value="Medium"></wa-tag-input>
  <wa-tag-input size="l" label="Large" value="Large"></wa-tag-input>
  <wa-tag-input size="xl" label="Extra large" value="Extra large"></wa-tag-input>
</div>

<wa-tag-input label="Assignees" value="Ada, Grace" disabled></wa-tag-input>

<wa-tag-input label="Roles" value="Owner, Maintainer" readonly></wa-tag-input>

<div class="wa-stack">
  <wa-tag-input label="Recipients" placeholder="Add an email">
    <wa-icon slot="start" name="envelope"></wa-icon>
  </wa-tag-input>
  <wa-tag-input label="Keywords" placeholder="Add a keyword">
    <wa-icon slot="start" name="tag"></wa-icon>
    <wa-icon slot="end" name="circle-info"></wa-icon>
  </wa-tag-input>
</div>

<form class="tag-input-validation">
  <wa-tag-input
    name="tags"
    label="Tags"
    hint="Add between two and five tags."
    min-tags="2"
    max-tags="5"
    required
  ></wa-tag-input>
  <br />
  <wa-button appearance="filled" type="submit">Submit</wa-button>
  <wa-button type="reset">Reset</wa-button>
</form>

<script type="module">
  const form = document.querySelector('.tag-input-validation');

  form.addEventListener('submit', event => {
    event.preventDefault();
    alert(`Submitted: ${new FormData(form).getAll('tags').join(', ')}`);
  });
</script>

<form class="tag-input-custom-validity">
  <wa-tag-input
    name="emails"
    label="Invite"
    hint="Every tag must be an email address."
    placeholder="[email protected]"
  ></wa-tag-input>
  <br />
  <wa-button appearance="filled" type="submit">Send invites</wa-button>
</form>

<script type="module">
  const form = document.querySelector('.tag-input-custom-validity');
  const tagInput = form.querySelector('wa-tag-input');

  tagInput.addEventListener('change', () => {
    const invalid = tagInput.value.filter(tag => !tag.includes('@'));
    tagInput.setCustomValidity(invalid.length ? `Not an email address: ${invalid.join(', ')}` : '');
  });

  form.addEventListener('submit', event => {
    event.preventDefault();
    alert('Invites sent');
  });
</script>

<wa-tag-input
  class="tag-input-reject"
  label="Usernames"
  hint="Letters, numbers, and underscores only."
  placeholder="Add a username"
></wa-tag-input>

<script type="module">
  const tagInput = document.querySelector('.tag-input-reject');

  tagInput.addEventListener('wa-create', event => {
    if (!/^\w+$/.test(event.detail.inputValue)) {
      event.preventDefault();
    }
  });
</script>

<div class="tag-input-changes">
  <wa-tag-input label="Labels" value="bug, help wanted"></wa-tag-input>
  <p>Labels: <code class="output">bug, help wanted</code></p>
</div>

<script type="module">
  const container = document.querySelector('.tag-input-changes');
  const tagInput = container.querySelector('wa-tag-input');
  const output = container.querySelector('.output');

  tagInput.addEventListener('change', () => {
    output.textContent = tagInput.value.join(', ') || '(none)';
  });
</script>

<wa-tag-input class="tag-input-styled" label="Genres" value="Jazz, Ambient, Techno"></wa-tag-input>

<style>
  .tag-input-styled::part(tag) {
    background-color: var(--wa-color-brand-fill-quiet);
    border-color: var(--wa-color-brand-border-quiet);
    color: var(--wa-color-brand-on-quiet);
  }

  .tag-input-styled::part(tag__remove-button) {
    color: var(--wa-color-brand-on-quiet);
  }
</style>