HxInputTags #
Input for entering tags.
Does not allow duplicate tags.
Due to a breaking change in Bootstrap 5.2, the keyboard navigation stopped working for dropdowns triggered from
input (the Up and Down keys).
As an experimental feature, we have added our own keyboard navigation routines to the affected components. This might be subject to future change.
You can check the progress here: https://github.com/havit/Havit.Blazor/issues/348.
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.
The current implementation of HxInputTags for
AllowCustomTags="false" only allows adding tags from suggestions (dropdown).
Keyboard support might be implemented in the future (we have to check the added tags with the DataProvider to apply the restriction).
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.
API #
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 |
| 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? |
Label type. |
| 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=" and TextColor=". |
| 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-gap | Gap between the tags. | .25rem |
| --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) |