Tags
Several values in one field
Tags
Enter or a comma adds one; Backspace removes the last.
Code
<div>
<label class="form-label" for="tg-1">Skills</label>
<div class="tags-input" data-tags>
<span class="chip">Design<button type="button" aria-label="Remove Design" data-remove><svg class="icon icon-sm" viewBox="0 0 24 24" aria-hidden="true">…</svg></button></span>
<span class="chip">Research<button type="button" aria-label="Remove Research" data-remove><svg class="icon icon-sm" viewBox="0 0 24 24" aria-hidden="true">…</svg></button></span>
<span class="chip">Prototyping<button type="button" aria-label="Remove Prototyping" data-remove><svg class="icon icon-sm" viewBox="0 0 24 24" aria-hidden="true">…</svg></button></span>
<input id="tg-1" type="text" placeholder="Add a tag" aria-label="Add a skill" autocomplete="off">
</div>
</div>Emails
Code
<div>
<label class="form-label" for="tg-2">Invite</label>
<div class="tags-input" data-tags>
<span class="chip">theo@northwind.test<button type="button" aria-label="Remove theo@northwind.test" data-remove><svg class="icon icon-sm" viewBox="0 0 24 24" aria-hidden="true">…</svg></button></span>
<input id="tg-2" type="text" placeholder="name@company.com" aria-label="Add an email" autocomplete="off">
</div>
</div>