simple-tag-input

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