Input for entering tags.
Does not allow duplicate tags.
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.
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"
.
If you don't want to use any suggestions and let the user add tags manualy, just leave the DataProvider
unset (null
).
If you want to restrict tags to suggested items only, set AllowCustomTags
to false
.
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).
Use TagBackgroundColor
and TagTextColor
via TagBadgeSettings
to adjust colors.
Consider enabling ShowAddButton
when using Naked
.
Use InputSize
parameter.
You might want to set custom AddButtonText
especially for Naked
input.
You can disable the input by setting Enabled="false"
.
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.
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. |
Method | Returns | Description |
---|---|---|
FocusAsync() | ValueTask |
Gives focus to the input element. |
Property | Type | Description |
---|---|---|
Defaults | InputTagsSettings |
Application-wide defaults for the HxInputTags . |
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) |