Lumeo

TagInput

An input field for creating and managing tags with optional suggestions and limits.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<TagInput />

When to Use

  • Tagging content with categories, labels, or keywords
  • Multi-value text entry such as email recipient lists
  • Filter or search inputs where users add multiple terms
  • Any field where users create a dynamic list of short text values
BlazorC#
React

Tags: React

AlphaBeta
A Ada Lovelace

Selected: Ada Lovelace

API Reference

TagInput

Property Type Default Description
Tags List<string> — The list of tags. Supports two-way binding.
Suggestions List<string>? — Autocomplete suggestions shown when typing.
MaxTags int? — Maximum number of tags allowed.
AllowDuplicates bool false Allow duplicate tag values.
Placeholder string? — Placeholder text shown when empty.
TagsChanged EventCallback<List<string>> — Two-way binding callback for the tags list.
Disabled bool false Disables user interaction.
TItem @typeparam string Item type. Use a custom record/class for non-string tags (e.g. user picker).
GetTagText Func<TItem, string>? ToString() Maps an item to its tag display text. Required for non-string TItem when not using TagTemplate.
GetSuggestionText Func<TItem, string>? GetTagText Maps an item to its searchable suggestion text. Falls back to GetTagText, then ToString().
TagTemplate RenderFragment<TItem>? — Custom render fragment for each tag (e.g. avatar + name).
SuggestionTemplate RenderFragment<TItem>? — Custom render fragment for each suggestion row in the popup.
Separators string[] [","] Strings that split typed/pasted input into multiple tags. Pass {",", ";", "\n", "\t"} for richer paste support.
ValidateInput Func<string, string?>? — Synchronous validation. Return null to accept, or an error string to block + display inline.
ValidateInputAsync Func<string, Task<string?>>? — Async validation (e.g. server-side uniqueness check).
CreateTag Func<string, TItem?>? cast for string Converts free-text input to a TItem when no suggestion matches. Required for non-string TItem.
MaxTagsHelperText string? localized Helper text shown below the field once MaxTags is reached.
Required bool false Marks the field as required. Syncs with a parent FormField.
Invalid bool false Applies error styling. Syncs with a parent FormField.
ErrorText string? null Error message displayed below the field when Invalid is true.
HelperText string? null Helper text shown below the field when not invalid.
Label string? null Label rendered above the field (standalone, without FormField).
Name string? null HTML name attribute for form submission.
FormField FormField.FormFieldContext? null Cascaded context from a parent FormField; wires label, validation, and required state automatically.

Related Components

  • Combobox — Searchable dropdown for selecting from predefined options
  • Badge — Display tags or labels as styled badges
  • Input — Single-value text input for simpler fields