LgTagBox

LgTagBox allows you to enter a list of text values as tags. Each validated value (enter, semicolon, or comma by default) becomes a removable tag. The bound value is a List<string>.

<LgTagBox Label="#Keywords" @bind-Value="_model.Keywords" />

Namespace: Lagoon.UI.Components
Inherits from: LgInputBase<List<string>> → LgAriaComponentBase → LgComponentBase
NuGet package: Lagoon.UI

Usage

Demonstration

Try this component in the Lagoon showcase.

Simple input

ArticlePage.razor
<LgTagBox Label="#Keywords"
          Placeholder="#AddKeyword"
          @bind-Value="_model.Keywords" />

ArticlePage.razor.cs
public partial class ArticlePage : LgPage
{
    private readonly ArticleVm _model = new();

    private sealed class ArticleVm
    {
        public List<string> Keywords { get; set; } = new();
    }
}

Limits and duplicates

MaxTags limits the number of tags, MaxChars limits tag length. AllowDuplicates allows the same value twice. NoWrap fixes the field height with horizontal scrolling beyond.

RecipientsPage.razor
<LgTagBox Label="#Recipients"
          MaxTags="5"
          MaxChars="50"
          NoWrap="true"
          @bind-Value="_model.Recipients" />

RecipientsPage.razor.cs
public partial class RecipientsPage : LgPage
{
    private readonly RecipientsVm _model = new();

    private sealed class RecipientsVm
    {
        public List<string> Recipients { get; set; } = new();
    }
}

Validation keys and delimiter

ConfirmKeys lists the key codes that validate a tag (default 13, 59, 44: enter, semicolon, comma). Delimiter is the separator used to join values (semicolon by default).

TagsPage.razor
@* Validation by enter key only, values joined by comma. *@
<LgTagBox Label="#Tags"
          ConfirmKeys="_confirmKeys"
          Delimiter=","
          @bind-Value="_model.Tags" />

TagsPage.razor.cs
public partial class TagsPage : LgPage
{
    // Key codes that validate a tag: 13 = enter.
    private readonly List<int> _confirmKeys = new() { 13 };

    private readonly TagsVm _model = new();

    private sealed class TagsVm
    {
        public List<string> Tags { get; set; } = new();
    }
}

Input mask

InputMaskKind and InputMask constrain the format of each tag (like on LgTextBox). AutoUnmask returns the value without the mask and ClearIncomplete clears the input if the mask is incomplete.

PhoneListPage.razor
<LgTagBox Label="#PhoneNumbers"
          InputMaskKind="InputMaskKind.Mask"
          InputMask="99-99-99-99-99"
          AutoUnmask="true"
          ClearIncomplete="true"
          @bind-Value="_model.PhoneNumbers" />

PhoneListPage.razor.cs
public partial class PhoneListPage : LgPage
{
    private readonly PhoneListVm _model = new();

    private sealed class PhoneListVm
    {
        public List<string> PhoneNumbers { get; set; } = new();
    }
}

React to value changes

OnChangingAsync is called before the new list is assigned and allows canceling the change (args.Cancel); OnChange (inherited) is called after.

LabelsPage.razor
<LgTagBox Label="#Labels"
          OnChangingAsync="OnLabelsChangingAsync"
          @bind-Value="_model.Labels" />

LabelsPage.razor.cs
public partial class LabelsPage : LgPage
{
    private readonly LabelsVm _model = new();

    // Called before change: refuses reserved labels.
    private Task OnLabelsChangingAsync(ChangingEventArgs<List<string>> args)
    {
        if (args.NewValue is not null && args.NewValue.Contains("admin"))
        {
            args.Cancel = true;
            ShowWarning("#ReservedLabel");
        }
        return Task.CompletedTask;
    }

    private sealed class LabelsVm
    {
        public List<string> Labels { get; set; } = new();
    }
}

Properties

All [Parameter] properties of the component, including inherited ones.

Name	Type	Default	Declared in	Description
`AllowDuplicates`	`bool`	`false`	`LgTagBox`	Allows the same tag multiple times.
`AutoUnmask`	`bool`	`false`	`LgTagBox`	Returns the value without the mask when `InputMask` is used.
`ClearIncomplete`	`bool`	`false`	`LgTagBox`	Clears the value if the input mask is incomplete.
`ConfirmKeys`	`List<int>`	`[13, 59, 44]`	`LgTagBox`	Key codes that validate a tag (enter, semicolon, comma by default).
`Delimiter`	`string`	`";"`	`LgTagBox`	Separator used to join values.
`InputMask`	`string`	`null`	`LgTagBox`	Input mask applied to each tag.
`InputMaskKind`	`InputMaskKind`	`None`	`LgTagBox`	Type of input mask.
`InputMaskPlaceholder`	`string`	`null`	`LgTagBox`	Character filling empty positions in the input mask (for example `#` with the mask `99-99-99-99-99` displays `##-##-##-##-##`). Do not confuse with `Placeholder`. Without a value, the default mask character (`_`) is kept.
`MaxChars`	`int?`	`null`	`LgTagBox`	Maximum length of a tag.
`MaxTags`	`int?`	`null`	`LgTagBox`	Maximum number of tags. Once reached, the CSS class `bootstrap-tagsinput-max` is applied.
`NoWrap`	`bool`	`false`	`LgTagBox`	Fixes the field height; beyond that, a horizontal scroll bar appears.
`OnChangingAsync`	`Func<ChangingEventArgs<List<string>>, Task>`	`null`	`LgTagBox`	Callback called before value changes; the change can be canceled here.
`Placeholder`	`string`	`null`	`LgTagBox`	Hint text displayed when the field is empty. Distinct from `InputMaskPlaceholder`.
`TagCssClass`	`string`	`"label label-info"`	`LgTagBox`	CSS classes applied to each tag.
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgInputBase`	Additional HTML attributes applied to the rendered element.
`AutoFocus`	`bool`	`false`	`LgInputBase`	Gives focus to the field on first render.
`ConfirmationMessage`	`string`	`null`	`LgInputBase`	Confirmation message displayed before applying a value change.
`Container`	`IInputContainer<List<string>>`	`null`	`LgInputBase`	Internal use: attaches a GridView cell to the field.
`CssClass`	`string`	`null`	`LgInputBase`	Additional CSS classes.
`Disabled`	`bool`	`false`	`LgInputBase`	Disables the field.
`DisplayName`	`string`	`null`	`LgInputBase`	Field name used in error messages.
`HideValidationMessage`	`bool`	`false`	`LgInputBase`	Hides the validation message under the field.
`Label`	`string`	`null`	`LgInputBase`	Field label.
`LabelContent`	`RenderFragment`	`null`	`LgInputBase`	Custom content for the label area.
`OnChange`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback called after the value changes.
`OnReset`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback called when the field is reset by the clear button.
`PolicyEdit`	`string`	`null`	`LgInputBase`	Policy required to modify the field.
`PolicyVisible`	`string`	`null`	`LgInputBase`	Policy required to display the field.
`ReadOnly`	`bool`	`false`	`LgInputBase`	Displays values as read-only.
`Required`	`bool?`	`null`	`LgInputBase`	Required field. If `null`, inferred from the `[Required]` attribute of the bound property.
`ResetButton`	`bool?`	`null`	`LgInputBase`	Displays the clear button. If `null`, the application behavior configuration applies.
`ResetText`	`string`	`null`	`LgInputBase`	Clear button text.
`ResetTextAriaLabel`	`string`	`null`	`LgInputBase`	Accessible label (`aria-label`) of the clear button.
`Tooltip`	`string`	`null`	`LgInputBase`	Tooltip.
`TooltipIsHtml`	`bool`	`false`	`LgInputBase`	Indicates if `Tooltip` content is in HTML format (otherwise plain text).
`Value`	`List<string>`	`null`	`LgInputBase`	Bound value (`@bind-Value`).
`ValueChanged`	`EventCallback<List<string>>`	—	`LgInputBase`	Callback for updating the bound value.
`ValueExpression`	`Expression<Func<List<string>>>`	—	`LgInputBase`	Expression identifying the bound property.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Value of the `aria-label` attribute.
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Value of the `aria-labelledby` attribute.

Cascading parameters

LgTagBox also consumes parameters automatically provided by ancestor components (you do not need to define them): ParentAuthorizeView (LgAuthorizeView) and the edit context of a parent LgEditForm.

Events

Event	Type	Description
`OnChangingAsync`	`Func<ChangingEventArgs<List<string>>, Task>`	Before the list changes; `args.Cancel = true` cancels the change.
`OnChange`	`EventCallback<ChangeEventArgs>`	After the list changes.
`OnReset`	`EventCallback<ChangeEventArgs>`	On reset by the clear button.

Best practices / accessibility

Initialize the bound property with an empty list rather than null to simplify processing code.
To suggest values during input rather than free input, prefer LgSuggestBox or LgSelect with multiple selection.

Complete reference

All parameters (including inherited ones): API Reference — LgTagBox.

LgTextBox — text input (identical input masks).
LgSuggestBox — input with suggestions.
LgGridTagBoxColumn — tag column of an LgGridView.

Usage​

Demonstration​

Simple input​

Limits and duplicates​

Validation keys and delimiter​

Input mask​

React to value changes​

Properties​

Events​

Best practices / accessibility​

Related components​