Tag input

A multi-value tag entry with optional autocomplete suggestions, validation states, max-tags limit, and slot-overridable label/helper. Tags are added with Enter, , or Tab, and removed with × or Backspace on an empty input. Toggle Vue / CSS to switch the live demo and source together.

Basic

Default tag input that accepts custom values.

Vue SFC

Sizes

Small, medium and large.

Vue SFC

Variants

outlined, filled and underlined.

Vue SFC

Colors

All built-in color variants.

Vue SFC

States

Disabled, readonly and required.

Vue SFC

Validation

valid, invalid and warning states with messages.

Vue SFC

Suggestions

Autocomplete dropdown driven by an items array.

Vue SFC

Max tags

Limit how many tags can be added.

Vue SFC

Slots

Custom label and helper content via named slots.

Vue SFC

Event log

Live log of mno-add, mno-remove, mno-clear and mno-change.

Vue SFC

Customized

Override per-element styling with cssClass (Vue) or utility classes (CSS).

Vue SFC

Custom keys

Use key-value and display-value to feed natural-shape items (for example { id, name }) without pre-mapping. key-value names the property stored in each tag of modelValue; omit it to store the whole item object. display-value is either a property name (string) or a (item) => string function — when unset it falls back to item.label.

Vue SFC

DataSource (devextreme)

Bind a live devextreme DataSource with :data-source.prop. Suggestions come straight from the source, typing filters the loaded set client-side, and load-more="scroll" pages it one chunk at a time (here pageSize: 5). :immediate.prop="true" loads the first page on attach. This example builds the source with mono-utils' monoOdataFetch against a public OData endpoint (baseUrl, no configBaseUrl). Bind with .prop and use key-value / display-value to map the server fields.

Checkable + max

Add checkable for a checkbox multi-select: each suggestion row shows a checkbox (reusing mono-checkbox's styling), selected rows stay in the list checked instead of disappearing, and the dropdown stays open so you can tick several. Chips reuse mono-chip styling. The max prop caps how many chips show inline — the rest collapse into a clickable "+N more" chip whose dropdown lists them. Works with a raw items array (shown here) and a bound DataSource alike.

Vue SFC

Search the server

Typing already filters the loaded suggestions client-side. Set search-value (the field[s] to search) and, with a bound DataSource, typing queries the server (debounced) so the dropdown shows matches from the whole dataset — then tick rows to add tags. load-more="scroll" pages the filtered results; search-operation (default contains) and search-debounce (default 300ms) tune it. A plain items array filters client-side.

Grouped options

display-group is an array with one accessor per level — a string reads a field off the row, a function receives the row (:display-group.prop="['BrandNama', (row) => row.DeptNama]") — used as both the group key and the header label. Selected tags, key-value / display-value and search all work on the leaf rows.

group (recommended for a DataSource). Pass a plain, paginated source — no group in its request, so paging stays on — and add the boolean group prop. mono-tag-input fetches flat rows page by page (so load-more keeps working) and buckets the accumulated rows by display-group. Add group-sticky to pin headers while rows scroll. Each request is a normal $skip/$top page (never $apply=groupby):

group also works on a static array — 1,200 records generated with map, grouped two levels (team → role), sticky headers, load-more="scroll" revealing a chunk at a time:

Vue SFC

Pre-grouped data. If your data is already nested as { key, items }, omit group and it renders directly. group-key / group-items name the key and child-array fields (default 'key' / 'items'). This static array uses custom group-key="k" / group-items="rows":

Vue SFC

Width & height

Set width, height, min-width, max-width, min-height or max-height — each takes a CSS string ("320px", "80%") or a number (px). Fields are full width by default; set width to constrain.

Vue SFC

Types

Importimport { TagInputProps } from 'mono-helper'

Prop	Value	Default	Description
modelValue	unknown[]	[]	Two-way bound array of selected tag values.
value	unknown[]	[]	Selected tag values (kept in sync with modelValue).
items	string | TagInputItem[]	[]	Suggestion items to choose from.
dataSource	TagInputDataSource<TagInputItem>	—	DataSource driving the suggestions; takes precedence over items.
immediate	boolean	true	DataSource-only: auto-load the source on attach when it has no items yet.
loadMore	'' | 'button' | 'scroll' | boolean	—	Incremental loading mode; enabling defaults to scroll, button opts into a button.
pageSize	number	10	Chunk size used when paging a plain items array (default 10).
dropdownHeight	string | number	''	Fixed height of the scrollable suggestions list.
dropdownMaxHeight	string | number	''	Max height of the scrollable suggestions list.
keyValue	string	''	Property name on each item used as the stored tag value.
displayValue	string | (item: TagInputItem) => string	''	Property name or selector function deriving each item's display text.
displayGroup	TagInputDisplayGroup	[]	Per-level accessors for grouped options (header label per group level).
groupKey	string	'key'	Field holding a group node's key (default 'key').
groupItems	string	'items'	Field holding a group node's child array (default 'items').
group	boolean	false	Group a plain, paginated DataSource (or flat array) client-side.
groupSticky	boolean	false	Keep group headers pinned to the top while their rows scroll.
searchValue	string | string[]	''	Field(s) the search matches (server `searchExpr` + client filter target).
searchOperation	string	'contains'	devextreme search operation for server search (default 'contains').
searchDebounce	number	300	Debounce (ms) before a server search fires (default 300).
size	'sm' | 'md' | 'lg'	'md'	Size of the tag input.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'	'primary'	Color theme of the tag input.
variant	'underlined' | 'outlined' | 'filled'	'outlined'	Visual style of the tag input.
label	string	''	Text label shown above the field.
placeholder	string	'Add tag...'	Placeholder text shown when the input is empty.
helperText	string	''	Helper text shown below the field.
validationState	'warning' | 'default' | 'valid' | 'invalid'	'default'	Validation state controlling field styling.
validationMessage	string	''	Message shown for the current validation state.
errorMessage	string	''	Error message that forces the invalid state.
successMessage	string	''	Success message that forces the valid state.
name	string	''	Form field name for the underlying input.
disabled	boolean	false	Disables interaction with the tag input.
readonly	boolean	false	Makes the tag input read-only.
required	boolean	false	Marks the field as required.
clearable	boolean	false	Shows a clear button to remove all tags.
allowCustom	boolean	true	Allows adding custom tags not present in the items.
duplicate	boolean	—	Allows duplicate tag values.
maxTags	number	—	Maximum number of tags that can be added.
checkable	boolean	false	Checkbox multi-select mode (selected rows stay checked, dropdown stays open).
max	number	—	Max chips shown inline; the rest collapse into a clickable "+N more" chip.
ariaLabelText	string	—	Accessible label for screen readers.
ariaLabel	string	—	—
width	string | number	—	Explicit sizing of the field. Each accepts a CSS length string (`"320px"`, `"80%"`) or a number (interpreted as px). Use `width="100%"` for full width. (Distinct from `dropdownHeight`/`dropdownMaxHeight`, which size the popup.)
height	string | number	—	—
minWidth	string | number	—	—
maxWidth	string | number	—	—
minHeight	string | number	—	—
maxHeight	string | number	—	—
cssClass	TagInputCssClass	{}	Per-part class overrides for styling internal elements.