HxInputTags #

Input for entering tags. Does not allow duplicate tags.

Basic usage #


Static suggestions #

To offer a fixed list of suggestions (similar to HxSelect), set up the DataProvider to return those values (regardless of the input) and use SuggestDelay="0" together with SuggestMinimumLength="0".


No suggestions #

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


Restricted tags #

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


Colors #

Use TagBackgroundColor and TagTextColor via TagBadgeSettings to adjust the colors.


Naked #

Consider enabling ShowAddButton when using Naked.


Naked sizes #

Use the InputSize parameter.


Add-button text #

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

Disabled #

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


Input groups #

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


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



Parameters #

Name Type Description
AddButtonText string The optional text for the add button. Displayed only when there are no tags (the Value is empty). The 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 The chip template.
CssClass string The custom CSS class to render with the wrapping div.
DataProvider InputTagsDataProviderDelegate Set to a method providing data for tag suggestions.
Delimiters List<char> Characters that divide the current input into separate tags when typed. The default is comma, semicolon, and space.
DisplayName string Gets or sets the display name for this field.
This value is used when generating error messages when the input value fails to parse correctly.
Enabled bool? When null (default), the Enabled value is received from the cascading FormState. When the value is false, the 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). The default is true.
Hint string The hint to render after the input as form-text.
HintTemplate RenderFragment The hint to render after the input as form-text.
InputCssClass string The custom CSS class to render with the input element.
InputGroupCssClass string The custom CSS class to render with the input-group span.
InputGroupEndTemplate RenderFragment The input-group at the end of the input.
InputGroupEndText string The input-group at the end of the input.
InputGroupStartTemplate RenderFragment The input-group at the beginning of the input.
InputGroupStartText string The input-group at the beginning of the input.
InputSize InputSize? The size of the input.
Label string The label text.
LabelCssClass string The custom CSS class to render with the label.
LabelTemplate RenderFragment The label content.
LabelType LabelType? A base class for form input components. This base class automatically integrates with a Microsoft.AspNetCore.Components.Forms.EditContext, which must be supplied as a cascading parameter. Extends the InputBase class. Adds support for rendering bootstrap-based input with a validator. See also https://getbootstrap.com/docs/5.3/forms/overview/.
Naked bool Indicates whether a "naked" variant should be displayed (no border). The default is false. Consider enabling ShowAddButton when using Naked.
Placeholder string A 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 Defaults, overridden by individual parameters).
ShowAddButton bool? Indicates whether the add icon (+) should be displayed. The default is false.
SuggestDelay int? The debounce delay in milliseconds. The default is 300 ms.
SuggestMinimumLength int? The minimum number of characters to start suggesting. The default is 2.
TagBadgeSettings BadgeSettings The settings for the HxBadge used to render tags. The default is Color="ThemeColor.Light" and TextColor="ThemeColor.Dark".
ValidationMessageMode ValidationMessageMode? Specifies how the validation message should be displayed.
The default is ValidationMessageMode.Regular, you can override the application-wide default for all inputs in 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-secondary-color)
--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 derivative 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)
--hx-input-tags-add-button-disabled-opacity Opacity of disabled add button. .65
--hx-input-tags-dropdown-item-highlighted-background-color Background color of a dropdown item when highlighted. var(--bs-tertiary-bg)
An unhandled error has occurred. Reload 🗙