Blazorise DropdownList component

NuGet

Install extension from NuGet.

dotnet add package Blazorise.Components

Imports

In your main _Imports.razor add:

@using Blazorise.Components

Example

Selected item: CN

Selected text: China

<DropdownList TItem="Country" TValue="string"
              Data="@Countries"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Iso)"
              @bind-Value="@selectedDropValue"
              Color="Color.Primary"
              MaxMenuHeight="200px">
    Select item
</DropdownList>

<Field Horizontal>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected item: @selectedDropValue
    </FieldBody>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected text: @Countries?.FirstOrDefault( x => x.Iso == @selectedDropValue )?.Name
    </FieldBody>
</Field>

@code {
    private readonly CountryData CountryData = new();
    public IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        await base.OnInitializedAsync();
    }

    string selectedDropValue { get; set; } = "CN";
}

Checkbox Selection

The multiple selection feature in Blazorise's DropdownList component enables users to select multiple options from a dropdown menu via checkboxes. Each option in the menu comes with a checkbox for selection. Upon clicking the DropdownList, users can tick multiple checkboxes to select various options. This feature provides an efficient way of making multiple selections, enhancing user flexibility and interaction.

<DropdownList TItem="Country" TValue="IReadOnlyList<string>"
              Data="@Countries"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Iso)"
              @bind-Value="@selectedDropValues"
              SelectionMode="DropdownListSelectionMode.Checkbox"
              Color="Color.Primary"
              MaxMenuHeight="200px">
    Select item
</DropdownList>

<Field Horizontal>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected values: @(selectedDropValues is not null ? string.Join( ',', selectedDropValues ) : "");
    </FieldBody>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected texts: @(selectedDropValues is not null
            ? string.Join( ',', selectedDropValues.Select( x => Countries.FirstOrDefault( country => country.Iso == x )?.Name ?? string.Empty ))
            : string.Empty )
    </FieldBody>
</Field>

@code {
    private readonly CountryData CountryData = new();
    public IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        await base.OnInitializedAsync();
    }

    private IReadOnlyList<string> selectedDropValues { get; set; } = new[] { "AM", "AF" };
}

With Search

The DropdownList component in Blazorise allows users to search for items in the dropdown list.

By enabling Filterable property, a search box is displayed at the top of the dropdown list. Users can type in the search box to filter the list and quickly locate the desired item. This feature enhances user experience by providing a more efficient way of selecting items from a dropdown list.