Tag Input

An input that manages a list of string tags/chips. Supports configurable add-triggers, async suggestions, duplicate prevention, and keyboard removal.

Basic

Press Enter or comma to add a tag. Backspace removes the last tag.

Type to filter a list from OnSearchSuggestions.

Blazor

Provide a fixed list via the Suggestions parameter.

Limit count and optionally allow duplicates.

0 / 4 tags used

Configure which keys submit a tag via AddTrigger flags.

Enter + Tab only (no comma)

Three visual styles for the rendered tags.

A clear-all button appears when Clearable is true and tags are present.

All interaction is blocked when Disabled is true.

blazor

dotnet

csharp

TagInput component parameters.

Prop	Type	Default	Description
Tags	IReadOnlyList<string>?	null	Current tag list (use @bind-Tags for two-way binding).
TagsChanged	EventCallback<IReadOnlyList<string>?>		Fires when tags change.
Placeholder	string?	null	Input placeholder text.
AddTrigger	TagInputTrigger	Enter \| Comma	Flag combination of keys that submit a tag.
MaxTags	int	int.MaxValue	Maximum allowed tag count.
MaxTagLength	int	50	Maximum characters per tag.
AllowDuplicates	bool	false	Whether the same value can be added more than once.
Suggestions	IEnumerable<string>?	null	Static suggestion list shown while typing.
OnSearchSuggestions	Func<string,CancellationToken,Task<IEnumerable<string>>>?	null	Async callback for dynamic suggestions.
SuggestionDebounceMs	int	300	Debounce delay in ms for OnSearchSuggestions.
Variant	TagInputVariant	Default	Tag appearance: Default, Outline, Secondary.
Clearable	bool	false	Shows a clear-all button when tags are present.
Disabled	bool	false	Disables all interaction.
TagTemplate	RenderFragment<string>?	null	Custom render template for each tag chip.
Validate	Func<string, bool>?	null	Custom validation predicate — returning false rejects the tag.
OnTagRejected	EventCallback<string>		Fires when a tag fails validation or is a duplicate.