https://github.com/soenneker/soenneker.blazor.tomselect

A Blazor interop library for the select user control library, Tom Select
https://github.com/soenneker/soenneker.blazor.tomselect

blazor csharp dotnet input interop select tom tom-select tomselect

Last synced: about 1 month ago
JSON representation

A Blazor interop library for the select user control library, Tom Select

• Host: GitHub
• URL: https://github.com/soenneker/soenneker.blazor.tomselect
• Owner: soenneker
• License: mit
• Created: 2024-03-01T23:03:05.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2026-03-05T03:24:31.000Z (4 months ago)
• Last Synced: 2026-03-05T04:32:07.546Z (4 months ago)
• Topics: blazor, csharp, dotnet, input, interop, select, tom, tom-select, tomselect
• Language: HTML
• Homepage: https://soenneker.com
• Size: 4.97 MB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md
  • Security: .github/SECURITY.md

Awesome Lists containing this project

README

          
[![](https://img.shields.io/nuget/v/soenneker.blazor.tomselect.svg?style=for-the-badge)](https://www.nuget.org/packages/soenneker.blazor.tomselect/)

[![](https://img.shields.io/github/actions/workflow/status/soenneker/soenneker.blazor.tomselect/publish-package.yml?style=for-the-badge)](https://github.com/soenneker/soenneker.blazor.tomselect/actions/workflows/publish-package.yml)

[![](https://img.shields.io/nuget/dt/soenneker.blazor.tomselect.svg?style=for-the-badge)](https://www.nuget.org/packages/soenneker.blazor.tomselect/)

[![](https://img.shields.io/badge/Demo-Live-blueviolet?style=for-the-badge&logo=github)](https://soenneker.github.io/soenneker.blazor.tomselect)

[![](https://img.shields.io/github/actions/workflow/status/soenneker/soenneker.blazor.tomselect/codeql.yml?label=CodeQL&style=for-the-badge)](https://github.com/soenneker/soenneker.blazor.tomselect/actions/workflows/codeql.yml)

# ![](https://user-images.githubusercontent.com/4441470/224455560-91ed3ee7-f510-4041-a8d2-3fc093025112.png) Soenneker.Blazor.TomSelect

### A Blazor interop library for the select user control library, Tom Select

This library simplifies the integration of Tom Select into Blazor applications, providing access to options, methods, plugins, and events. A demo project showcasing common usages is included.

Diligence was taken to align the Blazor API with JS. Refer to the [Tom Select documentation](https://tom-select.js.org/) for details.

## Installation

```

dotnet add package Soenneker.Blazor.TomSelect

```

### Add the following to your `Startup.cs` file

```csharp

public void ConfigureServices(IServiceCollection services)

{

    services.AddTomSelectInteropAsScoped();

}

```

## Usage

```razor

@using Soenneker.Blazor.TomSelect

 // Supports two-way binding

@code{

    private TomSelect _tomSelect = default!;

    private List? _selectedCountries = [];

    private List? _countries;

    private readonly TomSelectConfiguration _configuration = new()

    {

        Plugins = [TomSelectPluginType.DragDrop]

    };

    protected override async Task OnInitializedAsync()

    {

        _countries = await Http.GetFromJsonAsync>("sample-data/countries.json");

    }

    private void OnItemAdd((string str, TomSelectOption obj) result)

    {

        Logger.LogInformation("OnItemAdd fired: Value: {value}", str);

    }

    private void LogSelectedItems()

    {

        foreach (Country item in _selectedCountries)

        {

            Logger.LogInformation("Selected item: {0}", item.Name);

        }

    }

}

```