Input Tag

Tag inputs render tags inside an input, followed by an actual text input.

Usage

The Input Tag component is a web component built from scratch to allow users to easily create and manage a list of tags or keywords, such as categorizing items, assigning labels, or filtering content. This is particularly useful in scenarios such as:

• Tagging articles or blog posts
• Organizing products or inventory by category
• Building a custom filtering system for a dataset

To get started, simply use the <uk-input-tag> markup in your HTML code.

Note While this component provides features to help manage tags, such as preventing duplicates and handling input validation, it is still a frontend component and can be tampered with by users. Therefore, it is essential to sanitize and validate user input on the server-side to ensure data integrity and security.

Prepopulating values

To prepopulate the Input Tag component with existing values, simply pass the value attribute with a comma-separated list of tag values. This allows you to initialize the component with a set of default tags, making it easier for users to build upon or edit existing data.

State modifiers

You can customize the appearance of individual tags by setting the state attribute. By default, tags will use the uk-tag-secondary class. However, you can choose from a range of available options to change the tag’s visual state, including:

Style	Class used	Description
primary	.uk-label-primary	Adds a primary style.
secondary	.uk-label-secondary	Adds a secondary style.
danger	.uk-label-danger	Adds a destructive style.

This allows you to add visual cues to your tags, making it easier to convey different types of information or categorizations.

Behavior

The Input Tag component provides intuitive mouse and keyboard interactions to facilitate easy tag management.

Mouse Behavior

• Clicking on a tag name will remove it from the list and place its value in the input field, allowing you to edit the tag.
• Clicking the close icon on a tag will remove it from the list entirely.

Keyboard Behavior

• When the input field is empty and you press the backspace key, the last tag in the list will be removed and its value will be placed in the input field, allowing you to edit or delete it.
• Pressing Enter or comma (,) key will add input value to the list of tags.

These interactions enable a seamless and efficient tagging experience.

Slugifying tags

By default, user-submitted tags will be added exactly as they are entered. To automatically convert tags into a slug format (e.g., converting spaces to hyphens, removing special characters, etc.), simply add the slugify attribute to the <uk-input-tag> element. This ensures that tags are formatted consistently and are more suitable for use in URLs or other technical contexts.

Under the hood, we use the popular slugify package to convert user-submitted tags into a slug format. To customize the slugification process, you can pass options using the slugify-options attribute. This attribute accepts either a JSON-stringified object or a valid key: value; foo: bar; format.

Available Options

The following options are available for customizing the slugify behavior:

Option	Description	Default
replacement	The replacement string used to replace spaces and other characters	-
remove	A valid regular expression pattern to remove from the tag
lower	A boolean indicating whether to convert the tag to lowercase	true
strict	A boolean indicating whether to strip special characters except for the replacement character	true
locale	The language code of the locale to use for slugification
trim	A boolean indicating whether to trim leading and trailing replacement characters	true

For more information about the slugify package and its options, please refer to the official documentation.

Preventing layout shift

When loading Web Components, there may be a brief delay before the content is fully rendered. This can result in a flash of unstyled content or unprocessed templates. To mitigate this issue, add the uk-cloak attribute to hide the entire element until Franken WC has fully loaded on the page. For an even more polished experience, consider setting a predefined height on the parent element to prevent layout shift and ensure a smooth user experience.

<div class="min-h-9">
  <uk-input-tag uk-cloak>...</uk-input-tag>
</div>

Please note that we used min-h-* because component might grow in height depending on the number of tags.

Attributes

Name	Type	Default	Description
maxlength	String	20	The maximum length of each tag before it can be added.
minlength	String	1	The minimum length of each tag before it can be added.
name	String		The name of the input field, which allows you to capture the tags on your server. Note that the component will automatically append [] to the name.
placeholder	String		The placeholder text displayed in the input field.
slugify	Boolean	false	A boolean indicating whether to slugify the input string before adding it as a tag.
slugify-options		false	A string with key: value format or JSON-stringified options for customizing the slugify behavior.
state	String	secondary	The visual state of the tags, which can be set to primary, secondary, or danger to change their appearance.
value	String		A comma-separated list of tags that will be prepopulated in the input field.

Events

The Input Tag component triggers the following events on elements with this component attached:

Name	Description
uk-input-tag:input	Fired after the value has changed, providing an opportunity to respond to user input.