HxInputTags

Input for entering tags. Does not allow duplicate tags.

Basic usage #

BlazorC#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".

PrimarySecondary

No suggestions #

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

PrimarySecondary

Restricted tags #

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

PrimarySecondary

Colors #

Use TagBackgroundColor and TagTextColor via TagBadgeSettings to adjust colors.

BlazorC#ASP.NET
BlazorC#ASP.NET
BlazorC#ASP.NET

Naked #

Consider enabling ShowAddButton when using Naked.

BlazorC#ASP.NET

Naked sizes

Use InputSize parameter.

BlazorC#ASP.NET
BlazorC#ASP.NET
BlazorC#ASP.NET

Add-button text #

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

Disabled #

You can disable the input by setting Enabled="false".

BlazorC#ASP.NET

Input groups #

HxInputTags component supports input groups. Learn more about them here.

Start
BlazorC#ASP.NET
End

Simple text can be used as an input group, or you can create a custom input group template.

BlazorC#ASP.NET

API

Parameters

Name Type Description
AddButtonText string Optional text for the add-button. Displayed only when there are no tags (the Value is empty). Default is null (none).
AdditionalAttributes IReadOnlyDictionary<string, object> A collection of additional attributes that will be applied to the created element.
AllowCustomTags bool Indicates whether you are restricted to suggested items only (false). Default is true (you can type your own tags).
ChipTemplate RenderFragment Chip template.
CssClass string Custom CSS class to render with wrapping div.
DataProvider InputTagsDataProviderDelegate Set to method providing data for tags' suggestions.
Delimiters List<char> Characters, when typed, divide the current input into separate tags. Default is comma, semicolon and space.
DisplayName string
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.
GenerateChip bool When true, HxChipGenerator is used to generate chip item(s). Default is true.
Hint string Hint to render after input as form-text.
HintTemplate RenderFragment Hint to render after input as form-text.
InputCssClass string Custom CSS class to render with the input element.
InputGroupCssClass string Custom CSS class to render with input-group span.
InputGroupEndTemplate RenderFragment Input-group at the end of the input.
InputGroupEndText string Input-group at the end of the input.
InputGroupStartTemplate RenderFragment Input-group at the beginning of the input.
InputGroupStartText string Input-group at the beginning of the input.
InputSize InputSize? Size of the input.
Label string Label text.
LabelCssClass string Custom CSS class to render with the label.
LabelTemplate RenderFragment Label content.
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 https://getbootstrap.com/docs/5.2/forms/overview/.
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.
Settings InputTagsSettings Set of settings to be applied to the component instance (overrides HxInputTags.Defaults, overriden by individual parameters).
ShowAddButton bool? Indicates whether the add-icon (+) should be displayed. Default is false.
SuggestDelay int? Debounce delay in miliseconds. Default is 300 ms.
SuggestMinimumLength int? Minimal number of characters to start suggesting. Default is 2.
TagBadgeSettings BadgeSettings Settings for the HxBadge used to render tags. Default is Color="ThemeColor.Light" and TextColor="ThemeColor.Dark".
ValidationMessageMode ValidationMessageMode? Specifies how the validation message should be displayed.
Default is ValidationMessageMode.Regular, you can override application-wide default for all inputs in HxInputBase.Defaults.
Value List<string> Value of the input. This should be used with two-way binding.
ValueChanged EventCallback<List<string>> A callback that updates the bound value.
ValueExpression Expression<Func<List<string>>> An expression that identifies the bound value.

Methods

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

Static properties

Property Type Description
Defaults InputTagsSettings Application-wide defaults for the HxInputTags.

CSS Variables

Name Description Default
--hx-input-tags-tag-margin Margin of tags. 0 .25rem 0 0
--hx-input-tags-input-width Input width. 3em
--hx-input-tags-input-placeholder-color Color of the placeholder input. var(--bs-gray-600)
--hx-input-tags-naked-font-size-lg Naked font size large. 1.25em
--hx-input-tags-naked-font-size-sm Naked font size small. .875em
--hx-input-tags-control-focused-box-shadow Box shadow of the control when focused. 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25)
--hx-input-tags-control-focused-border-color Border color of the control when focused (as the color is not exposed via CSS variables from Bootstrap, we use rgba derivate from --bs-primary-rgb and the color is not 100% accurate). rgba(var(--bs-primary-rgb), .3)
--hx-input-tags-add-button-text-margin Margin of an add button text. rgba(var(--bs-primary-rgb), .3)
An unhandled error has occurred. Reload 🗙