Input Tag

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

Table of contents

• Usage
• Capturing values
• Prepopulating values
• State modifiers
• Behavior
  • Mouse Behavior
  • Keyboard Behavior
• Slugifying tags
  • Available Options
• Disable input
• Error state
• Preventing layout shift
• Attributes
• Events

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.

Capturing values

There are several ways to capture values from the <uk-input-tag> component. The simplest approach is to add a name attribute to the component. When you do this, a hidden input field with the specified name will be automatically generated, allowing you to easily capture the selected value on your server.

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:

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:

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

Disable input

To prevent user input, add the disabled attribute to the <uk-input-tag> element. This will disable input field, prevent tags editing and removal. Making it impossible for users to enter or modify tags.

Error state

To indicate an error state in the form, simply add the .uk-form-destructive class to the cls-custom attribute. This will apply a “destructive” state to the component, providing visual feedback to the user.

Preventing layout shift

When loading Web Components, a brief delay may cause a flash of unstyled content. To mitigate this issue, consider setting a predefined height on the parent element to prevent layout shift and ensure a smooth user experience.

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

Attributes

Events

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