“Tags Field” Component

Tags Field is our natively built solution for adding multiple items to a text input. The look and feel of the component has been inspired by the bootstrap tags input.

This component can be used for adding/deleting tags for articles and other items. And can also be used for adding multiple inputs like email addresses for sending invites.

Article Tags

Use Comma or Enter to separate tags

Recipient Emails

Use Space or Enter to separate emails

Usage

Template

<x-tags-field id="articleTags" label="Article Tags" help-text="Use Comma or Enter to separate tags"/>
<x-tags-field id="emails" label="Recipient Emails" help-text="Use Space or Enter to separate emails" value="user@gmail.com,dev@hotmail.com"/>

JS

import {TagsInput} from 'modules/tagsInput';

new TagsInput('[data-tags-input="articleTags"]');
const emailInput = new TagsInput('[data-tags-input="emails"]');

emailInput.setConfirmKeys([' ', 'Enter']);
emailTag.addEventListener('tagsInput:tagAdding', (event) => {
    const tag = event.detail;
    const isValidEmail = /^.+@.+$/.test(tag);
    if (!isValidEmail) event.preventDefault();
});

Props

id (required)

string

ID used for selectors and passing ID to actual input and label itself.
label

string

Label for input.
help-text

string

Provided helpful additional info for input.
errors

array<string>

Turns on error state.
value

string

Initial value for tags, tags are separated by comma.