A Blazor component library that wraps Choices.js to provide enhanced select and input elements with search, tags, and more.
- ✅ Single and multiple select support
- ✅ Tags input with add/remove
- ✅ Built-in search functionality
- ✅ Configurable options
- ✅ Event callbacks for value changes
- ✅ Full Blazor interop support
- ✅ .NET 10 support
- ✅ Clean and intuitive API
Check out the live demo on GitHub Pages to see all features in action.
Add the BlazorChoices component library to your Blazor project:
dotnet add package BlazorChoicesOr add it directly to your .csproj file:
<PackageReference Include="BlazorChoices" Version="1.0.0" />Add the following to your _Imports.razor:
@using BlazorChoicesAdd the following to your index.html (Blazor WebAssembly) or _Host.cshtml (Blazor Server):
<!-- In the <head> section -->
<link href="_content/BlazorChoices/lib/choices/choices.min.css" rel="stylesheet" />
<!-- Before the closing </body> tag -->
<script src="_content/BlazorChoices/lib/choices/choices.min.js"></script><ChoicesSelect OnChange="@OnSingleChange">
<option value="">Select a fruit...</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</ChoicesSelect>
@code {
private string selectedValue = string.Empty;
private void OnSingleChange(string value)
{
selectedValue = value;
}
}<ChoicesSelect Multiple="true" OnChangeMultiple="@OnMultipleChange" Options="@options">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="fr">France</option>
<option value="de">Germany</option>
</ChoicesSelect>
@code {
private string[] selectedValues = Array.Empty<string>();
private ChoicesOptions options = new()
{
RemoveItemButton = true,
SearchEnabled = true,
PlaceholderValue = "Choose countries..."
};
private void OnMultipleChange(string[] values)
{
selectedValues = values;
}
}<ChoicesInput OnTagsChanged="@OnTagsChange" Options="@tagOptions" />
@code {
private string[] tags = Array.Empty<string>();
private ChoicesOptions tagOptions = new()
{
RemoveItemButton = true,
AddItems = true,
DuplicateItemsAllowed = false,
MaxItemCount = 10
};
private void OnTagsChange(string[] values)
{
tags = values;
}
}The ChoicesOptions class provides the following configuration options:
| Property | Type | Default | Description |
|---|---|---|---|
SearchEnabled |
bool | true | Enable search functionality |
RemoveItemButton |
bool | false | Show remove button for selected items |
ShouldSort |
bool | true | Sort choices alphabetically |
PlaceholderValue |
string | null | Placeholder text |
MaxItemCount |
int | -1 | Maximum number of items that can be selected (-1 = unlimited) |
DuplicateItemsAllowed |
bool | true | Allow duplicate items |
Position |
string | "auto" | Position of dropdown (auto, top, bottom) |
AddItems |
bool | true | Allow adding custom items |
RemoveItems |
bool | true | Allow removal of items |
NoResultsText |
string | "No results found" | Text shown when there are no results |
NoChoicesText |
string | "No choices to choose from" | Text shown when there are no choices |
Parameters:
Multiple(bool): Enable multiple selection modeOptions(ChoicesOptions): Configuration optionsOnChange(EventCallback): Event fired when a single value changesOnChangeMultiple(EventCallback<string[]>): Event fired when multiple values changeId(string): HTML id attributeClass(string): CSS classChildContent(RenderFragment): Option elements
Methods:
InitAsync(): Initialize the Choices.js instanceDestroyAsync(): Destroy the Choices.js instanceSetValueAsync(object value): Set the selected value programmaticallyGetValueAsync(): Get the current selected value
Parameters:
Options(ChoicesOptions): Configuration optionsOnTagsChanged(EventCallback<string[]>): Event fired when tags changeId(string): HTML id attributeClass(string): CSS class
Methods:
InitAsync(): Initialize the Choices.js instanceDestroyAsync(): Destroy the Choices.js instanceSetValueAsync(object value): Set the tags programmaticallyGetValueAsync(): Get the current tags
To build and run the sample application:
git clone https://github.com/agriffard/BlazorChoices.git
cd BlazorChoices
dotnet build
cd samples/BlazorChoices.Sample
dotnet runThen navigate to http://localhost:5000 in your browser.
To publish the sample application to GitHub Pages:
cd samples/BlazorChoices.Sample
dotnet publish -c Release -o publish
# Configure base href for GitHub Pages
# Then deploy the publish/wwwroot folder to gh-pages branch- .NET 10
- Blazor WebAssembly
- Choices.js v11.2.0
- JavaScript Interop
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
- Choices.js - The excellent JavaScript library that powers this component
- Built with ❤️ for the Blazor community