https://github.com/borisgerretzen/simpleblazormultiselect

A simple blazor multiselect dropdown component
https://github.com/borisgerretzen/simpleblazormultiselect

blazor combobox component dropdown multiselect multiselectdropdown multiselection

Last synced: about 1 year ago
JSON representation

A simple blazor multiselect dropdown component

• Host: GitHub
• URL: https://github.com/borisgerretzen/simpleblazormultiselect
• Owner: BorisGerretzen
• License: lgpl-3.0
• Created: 2023-11-24T23:52:34.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2025-03-12T22:40:06.000Z (about 1 year ago)
• Last Synced: 2025-03-12T23:22:52.592Z (about 1 year ago)
• Topics: blazor, combobox, component, dropdown, multiselect, multiselectdropdown, multiselection
• Language: HTML
• Homepage:
• Size: 25.4 MB
• Stars: 4
• Watchers: 1
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Simple blazor multiselect

This package contains a simple blazor dropdown component that supports single and multiple selection.

## Installation

1. Add the following to your `_Imports.razor` file:

    ```csharp

    @using SimpleBlazorMultiselect

    ```

2. Add the following to the `` of your `App.razor` or `index.html` file:

    ```html

    

    

    ```

## Usage

See the project `SimpleBlazorMultiselectDemo` for more examples of how to use the component, 

or take a look at the properties page on the [wiki](https://github.com/BorisGerretzen/SimpleBlazorMultiselect/wiki/Properties).

The demo project is hosted on [GitHub Pages](https://borisgerretzen.github.io/SimpleBlazorMultiselect/).

Below are some short examples, they all use the following `@code` block:

```csharp

@code {

    private readonly List _items = new() { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10" };

    private List _selectedItems = new();

}

```

### Basic dropdown

```html

```

![image](https://github.com/BorisGerretzen/SimpleBlazorMultiselect/assets/15902678/2f6bb03e-e076-44dc-a90d-1a8c24b84fee)

### Dropdown with custom item template

```html

    

        @foreach (var item in options)

        {

            

                @item

            

        }

    

```

![image](https://github.com/BorisGerretzen/SimpleBlazorMultiselect/assets/15902678/fa0ee874-b95f-4ee7-b813-7c321aadef74)

### Dropdown with filter

```html

```

![image](https://github.com/BorisGerretzen/SimpleBlazorMultiselect/assets/15902678/5f54049a-23c0-428b-992f-7735cffb985f)