HxInputTags

Input for entering tags. Does not allow duplicate tags.

Basic Usage

Blazor C# ASP.NET

Static suggestions

To offer fixed list of suggestions (simmilar to HxSelect), setup DataProvider to return those values (no matter the input) and use SuggestDelay="0" together with SuggestMinimumLength="0".

Primary Secondary

No suggestions

If you don't want to use any suggestions and let the user add tags manualy, just leave the DataProvider unset (null).

Primary Secondary

Restricted tags

If you want to restrict tags to suggested items only, set AllowCustomTags to false.

Primary Secondary

Colors

Use TagBackgroundColor and TagTextColor to adjust colors.

Blazor C# ASP.NET
Blazor C# ASP.NET

Naked

Consider enabling ShowAddButton when using Naked.

Blazor C# ASP.NET

Naked sizes

Use InputSize parameter.

Blazor C# ASP.NET
Blazor C# ASP.NET
Blazor C# ASP.NET

Add-button text

You might want to set custom AddButtonText especially for Naked input.

API

Parameters

Name Type Description
AllowCustomTags bool Indicates whether you are restricted to suggested items only (false). Default is true (you can type your own tags).
DataProvider InputTagsDataProviderDelegate Set to method providing data for tags' suggestions.
SuggestMinimumLength int? Minimal number of characters to start suggesting. Default is 2.
SuggestDelay int? Debounce delay in miliseconds. Default is 300 ms.
Delimiters List<char> Characters, when typed, divide the current input into separate tags. Default is comma, semicolon and space.
ShowAddButton bool? Indicates whether the add-icon (+) should be displayed. Default is false.
AddButtonText string Optional text for the add-button. Displayed only when there are no tags (the Value is empty). Default is null (none).
Naked bool Indicates whether a "naked" variant should be displayed (no border). Default is false. Consider enabling ShowAddButton when using Naked.
Placeholder string Short hint displayed in the input field before the user enters a value.
TagBackgroundColor ThemeColor? Background color of the tag (also used for the AddButton). Default is ThemeColor.Light.
TagTextColor ThemeColor? Color of the tag text (also used for the AddButtonText and icons). Default is ThemeColor.Dark.
LabelType LabelType? A base class for form input components. This base class automatically integrates with an Microsoft.AspNetCore.Components.Forms.EditContext, which must be supplied as a cascading parameter. Extends InputBase class. Adds support for rendering bootstrap based input with validator. See also .
InputSize InputSize?
Label string Label to render before input (or after input for Checkbox).
LabelTemplate RenderFragment Label to render before input (or after input for Checkbox).
Hint string Hint to render after input as form-text.
HintTemplate RenderFragment Hint to render after input as form-text.
CssClass string Custom CSS class to render with wrapping div.
LabelCssClass string Custom CSS class to render with the label.
InputCssClass string Custom CSS class to render with the input element.
ShowValidationMessage bool When false, validation message is not rendered. Default is true.
GenerateChip bool When true, HxChipGenerator is used to generate chip item(s). Default is true.
ChipTemplate RenderFragment Chip template.
Enabled bool? When null (default), the Enabled value is received from cascading FormState. When value is false, input is rendered as disabled. To set multiple controls as disabled use HxFormState.
AdditionalAttributes IReadOnlyDictionary<string, object>
Value List<string>
ValueExpression Expression<Func<List<string>>>
DisplayName string

Event Callbacks

Name Type Description
ValueChanged EventCallback<List<string>>

Methods

Method Returns Description
FocusAsync() ValueTask Gives focus to the input element.

Static properties

Property Type Description
Defaults InputTagsDefaults Application-wide defaults for the HxInputTags.
An unhandled error has occurred. Reload 🗙