BlazorInputTags 9.0.0

BlazorInputTags

A simple to use blazor component for both Blazor Server and WebAssembly which adds a basic tag editor to your app.

See a live demo right here on github.

Installation

You can install from Nuget using the following command:

Install-Package BlazorInputTags

Or via the Visual Studio package manger.

Basic usage

Start by adding the using statement to your _Imports.razor

@using BlazorInputTags

You can either use an existing List<string> and provide it to the component

<InputTags Value="Tags" />

@code {
	public List<string> Tags { get; set; } = new();
}

Or you can do manage the list by yourself.

<InputTags OnTagAdded="OnTagAddedAsync" OnTagRemoved="OnTagRemovedAsync"/>

@code {
	private Task OnTagAddedAsync(string tag) {
		// Do something with the tag
		return Task.CompletedTask;
	}

	private Task OnTagRemovedAsync(string tag) {
		// Do something with the tag
		return Task.CompletedTask;
	}
}

Providing options

You can pass an InputTagOptions instance to the component to override some core logic and behaviour.

Custom validation

The component provides you with a parameter to do some custom validation before adding the tag to the list. This can be achieved like this:

<InputTags Value="Tags" ValidateTag="ValidateTagAsync" />

@code {
    public List<string> Tags { get; set; } = new();
    private List<string> _notAllowedTags = new()
    {
        "Cat",
        "Horse",
        "Dolphin"
    };

    private Task<bool> ValidateTagAsync(string tag)
    {
        bool result = !_notAllowedTags.Any(x => x.Equals(tag, StringComparison.OrdinalIgnoreCase));
        return Task.FromResult(result);
    }
}

Note: When changing the class names to something different, you'll need to add the CSS by yourself.

Customizing design

The component uses custom CSS variables which can be overwritten within any public CSS file.

In addition you can overwrite or add any CSS using the corresponding selectors.