Skip to content
LIST SELECTION · FREE

TagInput

Add free-form tags with Enter or a comma.

A free-form list of tags without a form in sight. Users press Enter or a comma to add a tag, and Backspace to remove the last one.

Why it helps

  • Quick free-form tags
  • Keyboard friendly
  • Removable chips

Where it fits

  • Labels and keywords
  • Email lists
  • Skills
TagInput control in a RayCraft page

Example

<TagInput @bind-Values="_tags" Label="Keywords" Placeholder="Type a keyword and press Enter or comma" HelperText="Backspace removes the last tag." MaxTags="6" />
<span>@_tags.Count tags: @string.Join(" | ", _tags)</span>

@code {
    private IReadOnlyCollection<string> _tags = new List<string> { "blazor", "sass" };
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation