Simple tag input webcomponent

Simple yet enough input component for tag editing.

Features

• Enter and space to add tags (configurable)
• Autocomplete
• Tags are dismissible (optional)
• Backspace to remove last tag
• Smart shrinking input area with flexbox
• Customize styles in various ways
• Developed in TypeScript and available in JavaScript & TypeScript
• MIT License

...and more!

Install

npm install simple-tag-input

Example

<simple-tag-input id="tagInput" placeholder="Enter your tags..."></simple-tag-input>

Usage

simple-tag-input

simple-tag-input is a custom element representing a container. This holds input and simple-tag-input-tag elements as its children.

Example

<simple-tag-input placeholder="Enter tags..." autofocus></simple-tag-input>

Properties

Name | Default | Description ---------------|----------------|------------- autocomplete | true | Whether enable autocomplete autofocus | false | Whether the input get focus after load dismissible | true | Whether tags are dismissible or not placeholder | empty string | Placeholder of input tags | empty set | Tags entered ever (including dismissed ones), used for autocomplete triggers | ["enter", " "] | Array of KeyboardEvent#key used for tag separation triggers value | empty set | Tags entered

Events

added

Dispatched after some tags are added.

CustomEvent#detail

Name | Type | Description -------|----------|------------- tags | string[] | Tags added

dismissed

Dispatched after some tags are dismissed.

CustomEvent#detail

Name | Type | Description -------|----------|------------- tags | string[] | Tags dismissed

Styling

Styles specified to simple-tag-input by you will override default styles.

CSS Parts

We have ::part (Documentation) for custom styling.

Name | Description --------|------------- input | input element inside the component tag | simple-tag-input-tag element inside the component

CSS Variables

For easy customization, we provide CSS variables.

Name | Default | Description -------------------------------------|------------------|------------- --simple-tag-input-background | transparent | Background of component --simple-tag-input-color | black | Text color of input --simple-tag-input-border | 1px solid gray | Border of component --simple-tag-input-border-radius | 5px | Border radius of component --simple-tag-input-input-min-width | 2rem | Minimum width of input

To customize tag, see styling section of simple-tag-input-tag.

simple-tag-input-tag

simple-tag-input-tag is a custom element representing a tag.

This is not only for use combined with simple-tag-input, but also for independent use.

Example

<simple-tag-input-tag>lang:en</simple-tag-input-tag>

Slot

Anything can be a content of this tag (which usually is a text).

Properties

Name | Default | Description ---------------|----------------|------------- dismissible | false | Whether tag is dismissible or not

Note that even you set dismissible to true, it's still necessary to listen dismiss event and delete the tag by yourself.

import { SimpleTagInputTag } from "simple-tag-input";

const tag = new SimpleTagInputTag();
tag.dismissible = true;
tag.addEventListener("dismiss", ev => {
  ev.target.remove();
});

document.body.appendChild(tag);

Events

dismiss

Dispatched when dismiss button on tag is clicked.

Styling

Styles specified to simple-tag-input-tag by you will override default styles.

CSS Parts

We have ::part (Documentation) for custom styling.

Name | Description ----------|------------- dismiss | button element inside the component

CSS Variables

For easy customization, we provide CSS variables.

Name | Default | Description ------------------------------------------------|------------------|------------- --simple-tag-input-tag-background | #eee | Background of component --simple-tag-input-tag-color | black | Text color of input --simple-tag-input-tag-border | 1px solid #999 | Border of component --simple-tag-input-tag-border-radius | 5px | Border radius of component --simple-tag-input-tag-dismissible-background | transparent | Minimum width of input --simple-tag-input-tag-dismissible-color | black | Minimum width of input

Contribution

Thank you for your kindness!

git clone https://gitlab.com/kurousada/webcomponent-simple-tag-input
cd webcomponent-simple-tag-input
npm install

License

Distributed under MIT License.

Contributors

• Kuro Usada