Tag Input

<loomi-tag-input> is a form-associated tag entry field styled like <loomi-input>. Type a word or phrase, press Enter, and it becomes a removable gray outline tag.

Installation

npm install @loomidev/tag-input lit

import "@loomidev/tag-input";

Usage

<loomi-tag-input placeholder="Add tag"></loomi-tag-input>
<loomi-tag-input mode="below" placeholder="Add tag" value="Marketing,alex"></loomi-tag-input>

Use mode="inside" (default) to keep tags inside the field, or mode="below" to write tags beneath the field.

Set color to tint the chips. The default shade="light" uses a pale fill with a border one shade stronger than the chip color.

<loomi-tag-input label="Skills" color="success" value="Design,Research"></loomi-tag-input>
<loomi-tag-input label="Risks" color="warning" shade="dark" value="Blocked"></loomi-tag-input>

Field appearance

Use variant="minimal" for a bottom-border-only field:

<loomi-tag-input label="Skills" variant="minimal"></loomi-tag-input>

Use label-position="inside" to keep a compact label inside the top of the field, with tags and entered text displayed beneath it:

<loomi-tag-input label="Skills" label-position="inside"></loomi-tag-input>

Accessibility

For the library-wide baseline, see Foundations — Accessibility.

Responsive behavior

For the shared container and viewport rules, see Foundations — Responsive behavior.

Dark mode

For theme activation, token overrides, and contrast guidance, see Foundations — Dark mode.

Attributes

Attribute	Default	Description
name	(blank)	Submitted with the form.
label	(blank)	Floating label.
label-position	default	default keeps the floating label; inside keeps a compact label inside the top of the field.
placeholder	(blank)	Placeholder text for the draft input.
value	(blank)	Comma-separated tag value.
mode	inside	inside or below.
size	medium	tiny, small, regular, medium, or big.
variant	default	default or minimal (bottom border only, no box).
color	primary	Chip color.
shade	light	light, faint, or dark.
required	false	Requires at least one tag.
disabled	false	Disables input and tag removal.
readonly	false	Prevents editing and tag removal.
suffix	(blank)	Optional text suffix.
suffix-icon	(blank)	Optional icon-name suffix (see @loomidev/icons).

Slots

Slot	Description
suffix	Content rendered after the main value or label.

Events

Event	Description
change	Fired when the value is committed or changed.
input	Fired while the value is edited.
loomi-autocomplete-select	Fired when an autocomplete suggestion is selected.

Methods

Member	Description
.tags	Get or set the tag array.
.value	Comma-separated submitted value.
focus() / clear()	Focus the draft input or remove all tags.
validate()	Runs required validation and returns whether the control is valid.

Dependencies

• @loomidev/core
• @loomidev/icons
• @loomidev/theme