Siticone Tags Input

The SiticoneTagsInput is an advanced composite control that allows users to enter multiple items (tags) within a single text box. Tags are automatically tokenized when the user presses Enter or Space. It features comprehensive styling for both the input container and individual tag "chips," making it ideal for email recipients, categories, or keywords.

Data & Tag Management

Tags can be managed programmatically via a List or a comma-separated string string.

Property	Type	Description & Usage Example
`Tags`	List<string>	tagsInput.Tags.Add("New Tag"); Direct access to the list of tags. Note: Modifying this list directly may not trigger visual updates immediately; use the `Text` property or methods for instant updates.
`Text`	string	tagsInput.Text = "C#,VB.NET,Java"; Gets or sets the tags as a single comma-separated string. Setting this property automatically parses the string and creates the visual tags.

Tag Styling

Customize the appearance of the individual tag "chips" inside the control.

Property	Type	Description
`TagBackColor`	Color	Background color of the tag chips (Default: DodgerBlue).
`TagForeColor`	Color	Text color of the tag chips (Default: White).
`TagFont`	Font	Font used for the text inside the tags (Default: Bold).

Control Appearance

Settings for the outer container, borders, and general text styles.

Property	Type	Description
`TextBoxType`	TagsInputTextBoxType	`Default` (4 borders) or `Material` (Bottom border only).
`BorderColor`	Color	Color of the border in idle state.
`FocusBorderColor`	Color	Border color when the control has focus.
`HoverBorderColor`	Color	Border color when the mouse is hovering.
`HoverOpacity`	float	Opacity (0-1) of the border transition on hover.
`ContentPadding`	Padding	Inner padding between the border and the text area.
`CornerRadius...`	int	Radii for each corner (TopLeft, TopRight, etc.).
`MakeRadial`	bool	If true, creates perfectly circular ends (pill shape).

Interaction & Behavior

Property	Type	Description
`IsReadOnly`	bool	Prevents adding or editing tags. The control adopts the colors defined in `ReadOnlyColors`.
`PlaceholderText`	string	Text shown when there are no tags and no input text.
`PlaceholderColor`	Color	Color of the placeholder text.
`ReadOnlyColors`	TagsInputReadOnlyColors	Nested properties for styling the ReadOnly state: • `BackgroundColor` • `BorderColor` • `TextColor` • `PlaceholderColor`

Events

The control exposes granular events for tracking tag changes.

TagsChanged Event

// Fired whenever a tag is added, removed, edited, or cleared.
tagsInput.TagsChanged += (s, e) => 
{
                // e.Operation: Added, Removed, Edited, Cleared
                // e.AffectedTag: The specific tag text changed (if any)
                // e.AllTags: ReadOnlyCollection of current tags
    
                Console.WriteLine($"Operation: {e.Operation}, Total Tags: {e.AllTags.Count}");
};

TagAdded / TagRemoved

// Fired specifically when a tag is added.
tagsInput.TagAdded += (s, e) => 
{
                Console.WriteLine($"Added '{e.Tag}' at index {e.Index}");
};

// Fired specifically when a tag is removed (via Backspace).
tagsInput.TagRemoved += (s, e) => 
{
                Console.WriteLine($"Removed '{e.Tag}' at index {e.Index}");
};

TagEdited Event

// Fired when a user clicks an existing tag and modifies it.
tagsInput.TagEdited += (s, e) => 
{
                Console.WriteLine($"Tag changed from '{e.OldValue}' to '{e.NewValue}'");
};

TagClick Event

// Fired when a user clicks on a tag chip.
tagsInput.TagClick += (s, e) => 
{
                MessageBox.Show($"You clicked on tag: {e.Tag}");
};

Public Methods

Clear()

// Removes all tags from the control and clears the input.
siticoneTagsInput1.Clear();

Usage Examples

Example 1: Email Recipient Input

Configure the control to look like a modern email "To:" field.

C# - Email Setup

private void SetupEmailInput()
{
                // Visual Style
    emailTags.TextBoxType = TagsInputTextBoxType.Material;
    emailTags.PlaceholderText = "To: (Type email and press Enter)";
    emailTags.BorderColor = Color.LightGray;
    
                // Tag Style
    emailTags.TagBackColor = Color.FromArgb(230, 240, 255);
    emailTags.TagForeColor = Color.FromArgb(0, 80, 200);
    emailTags.TagFont = new Font("Segoe UI", 9f, FontStyle.Regular);
    
                // Validation Logic
    emailTags.TagAdded += (s, e) => 
    {
                if (!e.Tag.Contains("@"))
        {
                MessageBox.Show("Invalid email address");
                // Logic to remove the invalid tag could go here
        }
    };
}

Example 2: Read-Only Category Viewer

Use the control to display a list of categories that cannot be edited by the user.

C# - ReadOnly Categories

private void LoadCategories(List<string> categories)
{
                // Set Data
    categoryDisplay.Text = string.Join(",", categories);
    
                // Lock Control
    categoryDisplay.IsReadOnly = true;
    
                // Customize ReadOnly Appearance
    categoryDisplay.ReadOnlyColors.BackgroundColor = Color.WhiteSmoke;
    categoryDisplay.ReadOnlyColors.BorderColor = Color.Transparent;
    
                // Style Tags to look like badges
    categoryDisplay.TagBackColor = Color.DimGray;
    categoryDisplay.TagForeColor = Color.White;
    categoryDisplay.MakeRadial = true; // Pill shape
}

Example 3: Dynamic Theming

The control includes over 20 built-in theme presets accessible via the Smart Tag in the designer, or programmatically.

C# - Apply Themes

private void ChangeTheme(string themeName)
{
                // You can access the action list logic via reflection or 
                // simply set properties manually to match the themes.
    
                if (themeName == "Dark")
    {
        tagsInput.BackColor = Color.FromArgb(45, 45, 48);
        tagsInput.ForeColor = Color.WhiteSmoke;
        tagsInput.PlaceholderColor = Color.Gray;
        tagsInput.TagBackColor = Color.DodgerBlue;
        tagsInput.TagForeColor = Color.White;
        tagsInput.BorderColor = Color.FromArgb(100, 100, 100);
    }
                else if (themeName == "Success")
    {
        tagsInput.BackColor = Color.FromArgb(247, 254, 231);
        tagsInput.TagBackColor = Color.FromArgb(22, 163, 74);
        tagsInput.TagForeColor = Color.White;
        tagsInput.BorderColor = Color.FromArgb(34, 197, 94);
    }
}