Blazor.InputChips
1.0.0
There is a newer version of this package available.
See the version list below for details.
See the version list below for details.
dotnet add package Blazor.InputChips --version 1.0.0
NuGet\Install-Package Blazor.InputChips -Version 1.0.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Blazor.InputChips" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="Blazor.InputChips" Version="1.0.0" />
<PackageReference Include="Blazor.InputChips" />
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add Blazor.InputChips --version 1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: Blazor.InputChips, 1.0.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package Blazor.InputChips@1.0.0
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=Blazor.InputChips&version=1.0.0
#tool nuget:?package=Blazor.InputChips&version=1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
<img src="https://github.com/ZarehD/Blazor.InputChips/blob/main/ProjectIcon.png" alt="project icon" width=40 /> Blazor InputChips Component
Input control for editing a collection of chips (tag values).
Installation
Install the nuget package.
<PackageReference Include="Blazor.InputChips" Version="1.0.0" />Import the component stylesheet
<head> <link rel="stylesheet" href="_content/Blazor.InputChips/Blazor.InputChips.styles.min.css" /> <link rel="stylesheet" href="site.min.css" /> </head>Update _imports.razor
@using Blazor.InputChips.Components.SharedUse the component
<InputChips @bind-Chips="this.Chips" placeholder="add a tag" MinChipLen="3" MaxChipLen="30" /> @code { public List<string> Chips { get; set; } = []; }
Configure Functionality
Properties
Binding Value & Instance ID
| Property | Type | Description |
|---|---|---|
| Chips | List<string> | The collection of chip values to edit.<br/><br/>:bulb: <small>Supports binding (@bind-Chips).</small> |
| InstanceId | string | A unique value identifying an instance of the component.<br/><br/>:bulb: <small>Value is used in 'id' and 'name' attributes of elements.</small><br/>:bulb: <small>Guid.NewGuid().ToString() is used if no value assigned.</small> |
Flags/Switches
| Property | Type | Default | Description |
|---|---|---|---|
| AllowDeleteWhenReadOnly | bool | false | Specifies whether items in the Chips collection can be deleted when the ReadOnly property is true. |
| AllowDuplicates | bool | false | Specifies whether to allow duplicate chip entries.<br/><br/>:bulb:<small>Note that when set to false, duplicate chip values will not trigger an error. Instead, the value will remain in the input field and will not be added to the Chips collection.</small> |
| ApplyInputOutlineCss | bool | false | Specifies whether to apply the CSS class used for styling the input field outline property (.bic-input-outline). |
| DisableSubmitChipOnEnter | bool | false | Disables the [ENTER] key from submitting a value to be added to the Chips collection.<br/><br/>:bulb:<small>Note that if this property is set to true and the SubmitChipOnChar property is null, values entered in the input field will not be added to the Chips collection.</small> |
| EnableBackspaceRemove | bool | false | Specifies whether the [BACKSPACE] key will remove the last chip in the Chips collection.<br/><br/>:bulb: <small>Applies only when the input field is empty.</small> |
| HideValidationErrors | bool | false | Specifies whether to hide (not display) validation errors. |
| ReadOnly | bool | false | Specifies whether the Chips collection can be edited. |
Miscellaneous
| Property | Type | Default | Description |
|---|---|---|---|
| AllowedChips | List<string>? | null | Whitelist collection of permitted chip/tag values. |
| DeleteIconFontCss | string? | null | Specifies a CSS class used for the delete icon of a chip.<br/><br/>:bulb: <small>When a non-null value is specified for this property, an <i class="bic-chip-close @DeleteIconFontCss"> element is rendered instead of <img class="bic-chip-close" ... />.</small> |
| MinChipLen | int | 1 | The minimum permitted length of a chip value. |
| MaxChipLen | int | int.MaxValue | The maximum permitted length of a chip value. |
| MaxNumChips | int | int.MaxValue | Maximum number of chips allowed in the Chips collection. |
| SubmitChipOnChar | char? | null | Specifies a character (e.g. [SPACE]) that, like an [ENTER] keypress, will submit the current value to be added to the CharSubmitChip collection.<br/><br/>:bulb:<small>Note that the [SPACE] character in the above example will not be a part of the submitted chip value.</small><br/><br/>:bulb:<small>Note also that the [ENTER] key will still submit a value regardless of this setting unless DisableSubmitChipOnEnter is true.</small> |
Error Messages
| Property | Type | Description |
|---|---|---|
| AllowedChipsErrorMessage | string | The error message to use when the specified chip/tag value is not in the AllowedChips collection. |
| MinChipLenErrorMessage | string | The error message to use when the length of a chip value is less than the value specified in MinChipLen. |
| MaxChipLenErrorMessage | string | The error message to use when the length of a chip value exceeds the value specified in MaxChipLen. |
| MaxNumChipsErrorMessage | string | The error message to use when the attempting to add a chip to the Chips collection would exceed the value specified in MaxNumChips. |
Event Callbacks
| Callback | Type | Description |
|---|---|---|
| ChipsChanged | EventCallback<List<string>> | Callback invoked when Chips collection is modified. |
| OnCustomValidate | EventCallback<ChipValidationArgs> | Callback invoked to performing custom validation on a new chip value. |
Your custom validation callback (assigned to the OnCustomValidate property) is expected to add any validation errors it generates to the ChipValidationArgs.ValidationErrors collection.
Child Content Templates
| Template | Description |
|---|---|
| PrefixIconTemplate | Custom template to use for rendering an icon before (to the left of) each rendered chip entry. |
| ValidationErrorTemplate | Custom template to use when displaying validation errors. |
Template usage:
<InputChips ...>
<PrefixIconTemplate>
<img src="() => GetImageForChipValue(chip)">
</PrefixIconTemplate>
<ValidationErrorTemplate>
<div>
@error
</div>
</ValidationErrorTemplate>
</InputChips>
Modify Styling
You can style the component in two ways.
CSS Vars
Override one of the available CSS variables by assigning it a new value (in your own CSS file).
:root {
--bic-container-border-color
--bic-container-border-width
--bic-container-border-radius
--bic-chipslist-padding-x
--bic-chipslist-padding-y
--bic-chipitem-bgcolor
--bic-chipitem-color
--bic-chipitem-margin
--bic-chipitem-padding-x
--bic-chipitem-padding-y
--bic-chipitem-height
--bic-chipitem-line-height
--bic-chipitem-border-radius
--bic-chip-margin-x
--bic-chip-margin-y
--bic-chip-close-i-border-radius
--bic-chip-close-i-margin-left
--bic-chip-close-i-margin-top
--bic-chip-close-i-padding
--bic-chip-close-i-opacity
--bic-chip-close-i-hover-bgcolor
--bic-chip-close-i-hover-color
--bic-chip-close-i-hover-opacity
--bic-chip-input-item-margin
--bic-chip-input-outline
--bic-error-container-ul-list-style
--bic-error-container-ul-padding-left
--bic-error-container-ul-margin-bottom
--bic-error-item-color
--bic-error-item-fontsize
--bic-error-item-margin-top
}
CSS Classes
Override or extend the style rules in one or more of the CSS classes.
.bic-input-chips # outer-most container
.bic-container # inner container
.bic-chips-list # chips list
.bic-chip-item # chips list item container
.bic-chip # chip value
.bic-chip-close # chip close element (common styles)
img.bic-chip-close # chip close img element (img element styles)
i.bic-chip-close # chip close i element (i element styles)
.bic-chip-input-item # chip input field container
input.bic-chip-input # chip input field element (new chip entry field)
.bic-input-outline # chip input field element outline styles
div.bic-errors-container # validation errors div container
div.bic-error-item # validation error div item
ul.bic-errors-container # validation errors ul container
li.bic-error-item # validation error li item
<br/>
License
<br/> ⭐ If you like this project or find it useful, please give it a star. Thank you. ⭐
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.17)
- Microsoft.AspNetCore.Components.WebAssembly (>= 8.0.17)
-
net9.0
- Microsoft.AspNetCore.Components.Web (>= 9.0.7)
- Microsoft.AspNetCore.Components.WebAssembly (>= 9.0.7)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.