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.

<form>
  <uk-input-tag name="fruits" placeholder="Add a fruit" uk-cloak></uk-input-tag>
</form>

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.

<form>
  <uk-input-tag
    name="fruits"
    placeholder="Add a fruit"
    value="Apple,Mango,Lemon"
    uk-cloak
  ></uk-input-tag>
</form>

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.

<form>
  <div class="uk-margin">
    <uk-input-tag
      placeholder="Add a tag"
      state="primary"
      value="Featured,Recommended,Verified"
      uk-cloak
    ></uk-input-tag>
  </div>

  <div class="uk-margin">
    <uk-input-tag
      placeholder="Add a tag"
      value="Category,Topic,Tag,Label,Filter"
      uk-cloak
    ></uk-input-tag>
  </div>

  <div class="uk-margin">
    <uk-input-tag
      placeholder="Add a tag"
      state="danger"
      value="Deprecated,Error,Unsupported"
      uk-cloak
    ></uk-input-tag>
  </div>
</form>

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.

<form>
  <uk-input-tag
    placeholder="Add a tag"
    slugify
    value="fan-fiction"
    uk-cloak
  ></uk-input-tag>
</form>

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.

<form>
  <uk-input-tag
    placeholder="Add a tag"
    slugify
    value="Verified,Exclusive"
    state="primary"
    disabled
    uk-cloak
  ></uk-input-tag>
</form>

Error state

The Input Tag component is designed to integrate seamlessly with Franken UI. To indicate an error state in the form, simply add the error attribute. This will apply a “danger” state to the component, providing visual feedback to the user.

Tags

This field is required.

<form class="space-y-1.5">
  <label class="uk-form-label uk-text-danger">Tags</label>
  <div class="uk-form-controls">
    <uk-input-tag error placeholder="Add a tag" uk-cloak></uk-input-tag>
  </div>
  <p class="uk-form-help uk-text-danger">This field is required.</p>
</form>

Preventing layout shift

When loading Web Components, a brief delay may cause a flash of unstyled content. To mitigate this, add the uk-cloak attribute to hide the element until JavaScript loads. Setting a predefined height on the parent element can also prevent layout shift for a smoother experience.

<div class="min-h-11">
  <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
`disabled`	Boolean	false	Disables input field, making the entire component read-only.
`error`	Boolean	false	Applies the `uk-form-danger` class when set to `true`, indicating an error state in the form.
`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.

On This Page
Usage
Prepopulating values
State modifiers
Behavior
Slugifying tags
Disable input
Error state
Preventing layout shift
Attributes
Events

Request Web Components

Franken UI is an independent project. Help support it and expand its free component library.

Reach out