InputTag Tag Input Box

Rules

Basic Example

const rule = {
    type:"elInputTag",
    title:"Tags",
    field:"tag",
    value: ['tag1', 'tag2', 'tag3']
}

Props Configuration Examples

Limit Tag Count

const rule = {
    type:"elInputTag",
    title:"Product Tags",
    field:"tags",
    value: ['Hot', 'New'],
    props: {
        max: 5,
        placeholder: "Enter tags (max 5)",
    },
}

Draggable Sorting

const rule = {
    type:"elInputTag",
    title:"Tag Sorting",
    field:"tags",
    value: ['Tag 1', 'Tag 2', 'Tag 3'],
    props: {
        draggable: true,
        placeholder: "Draggable sorting",
    },
}

Use Delimiter

const rule = {
    type:"elInputTag",
    title:"Keywords",
    field:"keywords",
    value: [],
    props: {
        delimiter: ',',
        placeholder: "Use comma to separate multiple keywords",
    },
}

Save on Blur

const rule = {
    type:"elInputTag",
    title:"Tags",
    field:"tags",
    value: [],
    props: {
        saveOnBlur: true,
        placeholder: "Auto-save on blur",
    },
}

Events Examples

Listen to Tag Changes

const rule = {
    type:"elInputTag",
    title:"Product Tags",
    field:"tags",
    value: [],
    props: {
        placeholder: "Enter tags",
    },
    on: {
        change: (value) => {
            console.log('Tags changed:', value);
        },
        'add-tag': (value) => {
            console.log('Tag added:', value);
        },
        'remove-tag': (value) => {
            console.log('Tag removed:', value);
        },
        blur: (event) => {
            console.log('Lost focus:', event);
        },
        focus: (event) => {
            console.log('Gained focus:', event);
        },
    },
}

Tag Count Limit Alert

const rule = {
    type:"elInputTag",
    title:"Product Tags",
    field:"tags",
    value: [],
    props: {
        max: 3,
        placeholder: "Maximum 3 tags",
    },
    inject: true,
    on: {
        'add-tag': ($inject, value) => {
            const currentTags = $inject.api.getValue('tags') || [];
            if (currentTags.length >= 3) {
                alert('Maximum 3 tags allowed!');
                // Remove the last tag
                currentTags.pop();
                $inject.api.setValue('tags', currentTags);
            }
        },
    },
}

Full configuration: Element_InputTag

value :Array

Props

Name	Details	Type	Default
max	Maximum number of tags that can be added	number	—
tagType	Tag type	enum	info
tagEffect	Tag effect	enum	light
trigger	Key to trigger tag input	enum	Enter
draggable	Whether tags can be dragged	boolean	false
delimiter	Add tag when matching delimiter	string / regex	—
size	Input box size	enum	—
saveOnBlur	Whether to save input value when input loses focus	boolean	true
clearable	Whether to show clear button	boolean	false
disabled	Whether to disable	boolean	false
validateEvent	Whether to trigger form validation	boolean	true
readonly	Equivalent to native readonly attribute	boolean	false
autofocus	Equivalent to native autofocus attribute	boolean	false
id	Equivalent to native input id attribute	string	—
tabindex	Equivalent to native tabindex attribute	string / number	—
maxlength	Equivalent to native maxlength attribute	string / number	—
minlength	Equivalent to native minlength attribute	string / number	—
placeholder	Input placeholder text	string	—
autocomplete	Equivalent to native autocomplete attribute	string	off
ariaLabel a11y	Equivalent to native aria-label attribute	string	—

Events

Name	Details	Type
change	Event triggered when bound value changes	Function
input	Triggered when Input value changes	Function
add-tag	Triggered when tag is added	Function
remove-tag	Triggered when tag is removed	Function
focus	Triggered when Input gains focus	Function
blur	Triggered when Input loses focus	Function
clear	Triggered when clear icon is clicked	Function

Slots

Name	Details	Type
tag	Content as tag	object
prefix	InputTag header content	—
suffix	InputTag footer content	—