Input Tag

Allows user to select or create tag from input.

Import

import { MpinputTag } from '@mekari/pixel3'

Playground

API

MpInputTag

Props

Events

Slots

Name	Type	Default
id Id of input tag.	string	-
placeholder Id of input tag.	string	-
data Data of input tag.	DataInterface[]	[]
max-tags Maximum tags.	number	100
suggestions Suggestions of input tag.	(string | Group | GroupSuggestions)[]	[]
suggestion-key define key when user search and select suggestions.	string	label
max-row Maximum row of input tag. set to -1 will be unlimited rows.	number	2
height-trigger Custom height for input tag.	string	auto
width-content Custom width for input tag suggestion.	string	auto
key-code List key code used to create tag.	string[]	["Enter"]
is-show-suggestions If true, suggestions list will showed up.	boolean	false
is-group-suggestions If true, suggestions list will showed up as group.	boolean	false
is-show-input If true, input will be showed.	boolean	true
is-read-only-tag If true, tag is marked as read-only when created.	boolean	false
is-invalid-tag If true, tag is marked as invalid when created.	boolean	false
is-loading If true, loading icon will be displayed.	boolean	false
is-suggestion-loading If true, loading icon will be displayed on suggestions.	boolean	false
is-show-icon-chevron-down If true, chevron down icon will be displayed.	boolean	false
is-enable-create-new-tag If true, input can create new tag.	boolean	true
is-disabled If true, input tag will be disable.	boolean	false
is-invalid If true, input tag will be invalid.	boolean	false
is-read-only If true, input tag will be read only.	boolean	false
is-required If true, mark as required.	boolean	false
is-infinity-scroll If true, input tag will enable infinity scroll. Get callback from scroll-end.	boolean	false
is-manual-filter If true, user need to handle filter manually.	boolean	false
is-truncated If true, tag will be truncated by default.	boolean	true
is-keep-alive If true, popover will keep suggestion in DOM.	boolean	true
is-adaptive-width If true, popover will render suggestion in adaptive width.	boolean	true
use-portal If true, input tag is rendered with portal.	boolean	false
text Object to change static text.	object	{ add: 'Add', noResultFound: 'No result found', noOptions: 'No options', duplicate: 'already selected before', maxTags: 'You can only use', tags: 'tags', loading: 'Loading...' }

Usage

Free Tag

Only Suggestions

Group Suggestions

Custom Suggestions

Custom Tag

Infinity Scroll

With Validation