IxDF Design System

“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.

Use Comma or Enter to separate tags
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.