HxInputTags #
Input for entering tags.
Does not allow duplicate tags.
Due to 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 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 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".
No suggestions #
If you don't want to use any suggestions and let the user add tags manualy, just leave the DataProvider unset (null).
Restricted tags #
If you want to restrict tags to suggested items only, set AllowCustomTags to false.
Current HxInputTags implementation for
AllowCustomTags="false"" allows adding tags only from suggestions (dropdown).
Keyboard support might be implemented in future (we have to check the added tags with DataProvider to apply the restriction).
Colors #
Use TagBackgroundColor and TagTextColor via TagBadgeSettings to adjust colors.
Naked #
Consider enabling ShowAddButton when using Naked.
Naked sizes #
Use InputSize parameter.
Add-button text #
You might want to set custom AddButtonText especially for Naked input.
Disabled #
You can disable the input by setting Enabled="false".
Input groups #
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 |
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 |
| 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, overridden by individual parameters). |
| ShowAddButton | bool? |
Indicates whether the add-icon (+) should be displayed.
Default is false. |
| SuggestDelay | int? |
Debounce delay in milliseconds. 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=" and TextColor=". |
| 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) |