Components / Tag Input

Tag Input

The Navius TagInput primitive in a pill / chip skin. Type and commit on the configured delimiters (Enter and comma by default) to add a chip; Backspace on an empty field highlights then removes the last one. Validate and Transform gate and normalize entries. Add a few tags below. This preview is the real component running in WebAssembly.

Examples

blazor dotnet ui

3 tag(s): blazor, dotnet, ui

razor
<ZitsTagInput @bind-Value="_tags" Placeholder="Add a tag" />

@code { private IList<string> _tags = new List<string>(); }

Installation

Terminal bash
navius add tag-input

API reference

ZitsTagInput:

Prop Type Default
Value IList<string>? null
ValueChanged EventCallback<IList<string>> -
DefaultValue IList<string>? null
Placeholder string? null
Delimiters IReadOnlyList<TagDelimiter>? Enter, comma
AllowDuplicates bool false
MaxTags int? null
Validate Func<string, bool>? null
Transform Func<string, string>? null
AddOnBlur bool false
OnAdd / OnRemove / OnInvalid EventCallback<string> -
Disabled bool false