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 to adjust colors.

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

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, TValue> 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.
InputSize InputSize? Size of the input.
Label string Label to render before input (or after input for Checkbox).
LabelCssClass string Custom CSS class to render with the label.
LabelTemplate RenderFragment Label to render before input (or after input for Checkbox).
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 .
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.
ShowValidationMessage bool When false, validation message is not rendered. Default is true.
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".
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-left Left margin of tags. 0
--hx-input-tags-tag-margin-right Right margin of tags. .25rem
--hx-input-tags-tag-margin-y Top and bottom margin of tags. .125rem
--hx-input-tags-tag-hover-opacity Tag background color opacity on hover. .1
--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)
An unhandled error has occurred. Reload 🗙