TTagEdit Component 1.2

[AlexanderT]

Hello!

I wrote a component for visual tag management, similar to modern tag editors used on popular websites.
It has been tested on Windows and Linux, and is released under the MIT License.

https://github.com/plaintool/TagEdit

TagEdit — a custom Lazarus component that provides an editable tag input field similar to modern web tag editors. It allows users to enter text and convert it into visual tag chips with a remove button, supporting multiple lines, drag-and-drop reordering, and smooth tag editing.

Let me know if something doesn’t work as expected!

Version 1.2 released!
https://github.com/plaintool/TagEdit/releases/latest

In this release, the main additions are smart tag suggestions with the ability to mark tags for adding or removing, mouse-based tag selection with a selection frame, improved automatic tag color tuning, and a new option to get a TBitmap with any tags rendered the way you need.
Added TCheckListButton as a standalone component — a button with a drop-down multi-select checklist that can be attached to an input control such as TEdit.
There are also plenty of other small improvements and refinements across the app.

[n7800]

An interesting component! As a GitLab user, I can't help but think about its tags (called "labels"). Its own projects (the source code for the site itself) have a very extensive tagging system. For example, in this issue, you can see tags like the one in the attached image. They're multi-level, and each has its own color.

I don't really think all of this is necessary for your component, but maybe you'll find it inspiring for the next version ))

[n7800]

By the way, how about displaying "delete crosses" only on mouse hover?

Yes, you still need to leave space for them. However, they can even appear over the text to prevent the text from "jumping" when the mouse simply hovers over the tags.

[AlexanderT]

Hi n7800 !

Thanks for the suggestions! The coloring looks really impressive.
I’ll take note of: coloring, status, also tooltips , and a delete button visible only on mouse hover.
The only issue is how to store all of this — in separate string-array properties or by creating some composite object properties.
It’s easier — when a component depends on data, in that case a TDBTagEdit needs to be developed

[n7800]

The only issue is how to store all of this — in separate string-array properties or by creating some composite object properties.
It’s easier — when a component depends on data, in that case a TDBTagEdit needs to be developed

Of course, I understand. But "scopes" ("groups") are easily implemented - the tag name is separated by the ":" symbol (for example) and rendered in two halves of different colors. That is, the "group" and "name" are extracted from the tag itself. Of course, need to add a property for the group color.

[AlexanderT]

An interesting component! As a GitLab user, I can't help but think about its tags (called "labels"). Its own projects (the source code for the site itself) have a very extensive tagging system. For example, in this issue, you can see tags like the one in the attached image. They're multi-level, and each has its own color.

I don't really think all of this is necessary for your component, but maybe you'll find it inspiring for the next version ))

Hello!

I’ve released version 1.1.
I created a component version with groups and color highlighting.

The TagColors property contains a collection of colors for rendering the text of groups and tags (I call them tags and suffixes).
In the collection, colors are matched by checking if the text name specified in it occurs within the tag or group name.
If a color for the text is not found in the collection, the color is taken from TagColor or TagSuffixColor. If these properties are set to clNone, a unique random color is generated based on the tag name.
In the sample, the border is also specified, and the suffix color is set to white to create a GitLab-like effect.

Other improvements include options like CloseButtonOnHover, TagHoverUnderline, or you can hide buttons completely using the CloseButtons property. Other changes are mainly minor fixes and enhancements.

[AlexanderT]

Version 1.2 released!

Changelog

v1.2 (2025-12-06)
Full Changelog

🚀 New Features

- Add support for tag suggestions #17
- Add AutoColorSaturation to provide a lighter color style for tags #10
- Introduce a new method to obtain a TBitmap containing tags #8
- Implement tag selection #3

✨ Enhancements

- Property defining whether to display the checklist below the edit field or below the entire control #34
- Correct rendering of tag labels #33
- Extend hotkeys for tag selection #30
- Add cancellation capability to the BeforeChange event #28
- Enhance bulk tag editing #26
- Add property that controls sorting of the suggested tags dropdown list #25
- Add properties for adjusting the opening position of the dropdown checklist #21
- Provide property for adjusting height #20
- Add properties for configuring the tag suggestions button #19
- Add function to retrieve current auto color #18
- Implement the TCustomTagEdit class #16
- Tag case does not affect auto coloring #15
- Escape clears the tag input field #12
- Add OnTagReorder event #11
- Add the TextHint property #9
- Use Backspace to edit the last tag and improve autocoloring #7
- Correctly handle keyboard events, the OnChange event, and other new properties #6
- Implement the DragIndicatorColor property #5

[JD]

Very nice. Thanks for your work and for sharing it.

JD