Input Tag

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

Table of contents

• Usage
• Tag states
• Capturing values
• Prepopulating values
• Allow duplicates
• Maximum tags
• Custom delimiters
• Internationalization
  • Using the i18n attribute
  • Using a configuration script
  • Available i18n options
• Custom classes
  • Using simple string format
  • Using JSON object format
  • Available cls targets
• Custom inline styles
  • Example
• Behavior
  • Paste 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.

Tag states

You can use the cls attribute to customize tag styling. This allows you to add visual cues to your tags, making it easier to convey different types of information or categorizations.

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.

Allow duplicates

By default, duplicate tags are prevented. To allow duplicate tags, add the allow-duplicates attribute:

Maximum tags

Limit the number of tags that can be added with the max-tags attribute. Set to 0 for unlimited (default).

Custom delimiters

By default, tags are created when pressing Enter or comma (,). Customize delimiters with the delimiters attribute:

Internationalization

The Input Tag component supports internationalization through multiple methods with the following priority order (highest to lowest):

• Component-level i18n (via i18n attribute or script tag)
• Global component-specific namespace (via <script id="uk-i18n">)
• Default values

Using the i18n attribute

Using a configuration script

Available i18n options

Key	Default	Description
placeholder	Add a tag…	Placeholder text for input field
remove-label	Remove tag	ARIA label for remove button
edit-label	Edit tag	ARIA label for tag text (click to edit)
tag-list-label	Tags	ARIA label for tag list container
min-length-error	Tag must be at least {min} characters	Error message for minimum length (supports {min} placeholder)
max-length-error	Tag cannot exceed {max} characters	Error message for maximum length (supports {max} placeholder)
duplicate-error	Tag already exists	Error message for duplicate tags
max-tags-error	Maximum {max} tags allowed	Error message for max tags limit (supports {max} placeholder)
input-label	Tag input	ARIA label for input field

Custom classes

The Input Tag component supports custom CSS classes through the cls attribute. This allows you to style specific elements within the tag input.

Using simple string format

Apply a class to the default element (host-inner):

Using JSON object format

Target specific elements within the input tag:

Available cls targets

Target	Description
host-inner	The main container wrapper
wrapper	The wrapper containing tags and input field
tag-list	The container for all tag elements
tag	Individual tag elements
tag-text	Text span inside tag (clickable for editing)
tag-remove	Remove button inside tag
input	The text input field
error	Error message container (shown on validation failure)

Custom inline styles

The Input Tag component supports custom inline styles through the stl attribute. The stl attribute supports the same targets as the cls attribute. See the Available cls targets table above for a complete list of targetable elements.

Example

Behavior

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

Paste behavior

• The component supports pasting multiple tags at once. When pasting text containing delimiters, tags are automatically split and added.

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.

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-danger class to the cls attribute. This will apply a “danger” 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

Name	Type	Default	Description
maxlength	Number	20	Maximum character length allowed for each tag.
minlength	Number	1	Minimum character length required for each tag.
slugify	Boolean	false	Enables slug transformation for tags (URL-friendly format).
slugify-options	String		JSON object or key:value format for customizing slugify behavior.
delimiters	String	,	Characters that trigger tag creation (e.g., ”,;” for comma or semicolon).
allow-duplicates	Boolean	false	Allows duplicate tags when enabled.
max-tags	Number	0	Maximum number of tags allowed (0 = unlimited).
name	String		Name attribute for hidden input fields (automatically appends []).
disabled	Boolean	false	Disables input field and prevents tag editing/removal.
placeholder	String		Placeholder text for input field (overrides i18n default).
value	String		Comma-separated list of tags to prepopulate.
cls	String		Custom CSS classes. Can be simple string or JSON object for targeting elements.
stl	String		Custom inline styles. Can be simple string or JSON object for targeting elements.
i18n	String		Internationalization strings as JSON object or via configuration script.
force-prevent-rerender	Boolean	false	Prevents component rerendering (useful for HTMX or SPA scenarios).

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.