Multi Input Tag

Content Type: Widget
Categories: Utility

Overview

MultiInputTag is a Mendix pluggable widget that enables users to enter multiple values within a single input field. Instead of creating separate inputs for repeated data, this widget allows users to add values as tags, making data entry faster, cleaner, and more intuitive.

 

The widget stores all entered tags as a JSON array inside a Mendix String attribute, allowing seamless integration with Mendix domain models while keeping the data structure flexible.

 

Use Multi Tag Viewer Widget to display the tags https://marketplace.mendix.com/link/component/257456

 

Key Capabilities

Multi-value input

Users can enter multiple items in a single field. Each value is converted into a tag, helping organize and visualize entered data clearly.

Keyboard-based tag creation

Tags can be quickly created using common separators such as Enter or comma (,), enabling fast data entry without leaving the keyboard.

Tag removal and editing

Users can remove tags individually using the remove icon or keyboard actions such as Backspace, providing an intuitive editing experience.

Duplicate prevention

The widget automatically prevents duplicate entries (case-insensitive), ensuring clean and consistent tag data.

Mendix data binding

Tags are stored as a JSON string in a Mendix String attribute, making it easy to store, retrieve, and process multiple values without modifying the domain model structure.

Customizable appearance

Developers can apply custom CSS classes to the input field and tags, allowing the widget to match the styling of any Mendix application.

Typical Use Cases

This widget is useful whenever an application needs to capture multiple small pieces of data within a single field, such as:

  • Keywords or tags
  • Email recipients
  • Categories or labels
  • Skills or technologies
  • Search filters
  • Product attributes

Benefits

  • Reduces UI clutter by replacing multiple fields with one input
  • Improves user experience for entering repeated values
  • Provides structured storage using JSON while remaining compatible with Mendix String attributes
  • Easy to integrate into existing Mendix forms and data views

MultiInputTag simplifies multi-value input in Mendix applications by combining intuitive tag-based interaction with flexible data storage.

Documentation

https://youtu.be/w0qAiJ6Ksg0

Typical Usage Scenario

The MultiInputTag widget is designed for scenarios where users need to enter multiple values within a single input field instead of using multiple separate inputs.

A common example is when an application needs to capture lists such as tags, keywords, categories, skills, email recipients, or labels. Instead of creating multiple rows or fields, users can continuously add values which are automatically converted into tags.

This approach improves usability by making the interface cleaner, faster, and more intuitive for entering repeated data. The widget stores these values as a JSON array in a Mendix String attribute, allowing applications to manage multiple values while still using a standard attribute type.

Typical use cases include:

  • Adding tags to articles or documents
  • Capturing multiple skills in employee profiles
  • Adding categories or labels to records
  • Entering multiple email recipients
  • Defining search keywords or filters

 

Use Multi Tag Viewer Widget to display the tags https://marketplace.mendix.com/link/component/257456

 

Features and Limitations

Features

  • Multi-value input within a single text field
  • Automatic tag creation using keyboard separators such as Enter or ,
  • Duplicate prevention to avoid repeated entries (case-insensitive)
  • Tag removal using the remove icon or keyboard actions
  • JSON-based storage in a Mendix String attribute
  • Custom styling support for tags and input field through CSS classes
  • Seamless Mendix integration with Data View context

Limitations

  • Tags are stored as a JSON string, so advanced querying may require parsing the JSON in logic or microflows.
  • Requires a String attribute with sufficient length (preferably unlimited) to avoid truncation.
  • The widget currently focuses on simple tag input and does not support complex validation rules beyond duplicate checks.

Dependencies

  • Mendix Studio Pro compatible with pluggable widgets
  • A String attribute in the domain model to store the tags as JSON

No additional Mendix modules are required.

Installation

  1. Download the widget package (.mpk file).
  2. Open your Mendix project in Mendix Studio Pro.
  3. Import the widget via App Explorer → Widgets → Import Widget.
  4. Build the application to ensure the widget is available in the toolbox.

Configuration

  1. Place the MultiInputTag widget inside a Data View.
  2. In the widget properties, select a String attribute to store the tags.
  3. Ensure the attribute length is unlimited or large enough to store the JSON array.
  4. Configure optional properties such as:
    • Label text
    • Placeholder text
    • Custom CSS classes for styling
  5. Run the application and start adding tags using the input field.

Known Bugs

Currently, there are no known critical issues.

If any unexpected behavior occurs, please report it through the project repository’s issue tracker.

Frequently Asked Questions

Q: How are the tags stored in Mendix?

Tags are stored as a JSON array in a String attribute, for example:

["Tag1","Tag2","Tag3"].

Q: Can I use this widget without a Data View?

No. The widget requires a Data View context because it binds to a Mendix object attribute.

Q: Can I style the tags?

Yes. Custom CSS classes can be applied to control the appearance of both the input field and tags.

Q: Can the widget prevent duplicate values?

Yes. Duplicate entries are automatically prevented using case-insensitive comparison.

 

 

 

 

 

 

 

 

Releases