Tag Input

Tag editor over a native input — type, Enter, remove chips, with optional datalist autocomplete. A Mò original.

INSTALL

1pnpm dlx @sayagodev/mo add taginput

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/taginput.css";2import "@sayagodev/mo/js/taginput.js";

EXAMPLES

Autocomplete tags

1<mo-taginput value="ink, brush">2  <input placeholder="Add tags…" maxlength="20" list="ex-tags" />3</mo-taginput>4<datalist id="ex-tags">5  <option>ink</option>6  <option>brush</option>7  <option>paper</option>8  <option>seal</option>9</datalist>10

USAGE

1<mo-taginput value="a, b">2  <input placeholder="Add tags…" list="opts" />3</mo-taginput>4<datalist id="opts"><option>a</option></datalist>

API

NAMEKINDDESCRIPTION

<mo-taginput>elementCustom element managing tag badges

valueattributeInitial comma-separated tags

.valueelementJS property: read/write array of strings or objects

input eventattributeBubbles on add/remove with detail=array

--mo-taginput-paddingtokenContainer inline padding hook

FILES

src/css/taginput.csssrc/js/taginput.js

Install:mo add taginput

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--background--foreground--input--radius--ring

Component hooks

--mo-input-radius--mo-taginput-padding

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.